/* ============================================================
   w-Blagajna marketing — v2 visual redesign
   Fonts: Archivo (UI) · Chivo Mono (numbers/mono)
   Brand: #cd4a20 orange · #0a1020 navy · #0d7f9e teal
   ============================================================ */

/* ── Tokens ── */
:root {
  --brand:      205 74 32;
  --brand-dk:   160 52 18;
  --navy:       10 16 32;
  --navy-card:  18 28 50;
  --teal:       13 127 158;
  --ink:        12 18 34;
  --ink-60:     68 84 112;
  --ink-40:     128 148 178;
  --surface:    255 255 255;
  --bg:         246 249 253;
  --bg-2:       236 243 251;
  --line:       216 226 240;
  --line-dk:    44 62 92;
  --shadow:     10 18 42;
  --r:          20px;
  --r-sm:       12px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; }

/* ── Base ── */
body {
  font-family: "Archivo", "Segoe UI", sans-serif;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgb(var(--bg)) 0%, rgb(var(--bg-2)) 100%);
}

/* ── Topbar ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgb(var(--line));
  box-shadow: 0 2px 20px rgb(var(--shadow)/0.05);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: rgb(var(--ink));
  font-weight: 900;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.brand-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgb(var(--brand));
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  gap: clamp(0.4rem, 1.1vw, 1.1rem);
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.main-nav a {
  text-decoration: none;
  color: rgb(var(--ink-60));
  font-weight: 600;
  font-size: clamp(0.78rem, 0.92vw, 0.93rem);
  white-space: nowrap;
  transition: color 0.18s;
}
.main-nav a:hover { color: rgb(var(--ink)); }

.main-nav .cta-link {
  color: rgb(var(--brand));
  border: 1.5px solid rgb(var(--brand)/0.35);
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  background: rgb(var(--brand)/0.07);
  font-weight: 700;
  transition: all 0.18s;
}
.main-nav .cta-link:hover {
  background: rgb(var(--brand));
  color: white;
  border-color: rgb(var(--brand));
}

.nav-toggle {
  display: none;
  border: 1.5px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  padding: 0.38rem 0.75rem;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
}

.theme-switcher {
  display: inline-flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.theme-btn {
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--ink-60));
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s;
}
.theme-btn.active {
  background: rgb(var(--brand));
  color: white;
  border-color: rgb(var(--brand));
}

/* ── Layout ── */
main {
  width: min(1260px, 92vw);
  margin: 0 auto;
  padding-bottom: 5rem;
}

/* ── Typography ── */
.eyebrow {
  font-family: "Chivo Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgb(var(--brand));
  text-transform: uppercase;
  margin: 0;
}

h1, h2, h3 {
  font-family: "Archivo", sans-serif;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5.4vw, 5rem); max-width: 13ch; }

.section-head h2 {
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  margin-top: 0.4rem;
}

.section-head p {
  margin-top: 0.7rem;
  color: rgb(var(--ink-60));
  font-size: clamp(0.97rem, 1.05vw, 1.08rem);
  max-width: 56ch;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0.82rem 1.45rem;
  font-weight: 800;
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s;
  white-space: nowrap;
  max-width: 100%;
  font-family: inherit;
}
/* Long translated CTA labels (HR/EN) must wrap instead of overflowing on narrow screens */
@media (max-width: 560px) {
  .pricing-cta .btn,
  .analytics-cta .btn,
  .hero-actions .btn,
  .demo-form .btn,
  .ea-banner .btn { white-space: normal; text-align: center; }
}

.btn.primary {
  background: rgb(var(--brand));
  color: white;
  box-shadow: 0 4px 20px rgb(var(--brand)/0.3);
}
.btn.primary:hover {
  background: rgb(var(--brand-dk));
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgb(var(--brand)/0.42);
}

/* ghost on dark bg (hero, workflow, demo, final-push) */
.btn.ghost {
  background: rgba(255,255,255,0.11);
  color: white;
  border: 1.5px solid rgba(255,255,255,0.24);
}
.btn.ghost:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* ghost on light bg (pricing, sticky cta) */
.btn.ghost-light {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  border: 1.5px solid rgb(var(--line));
  box-shadow: 0 2px 8px rgb(var(--shadow)/0.06);
}
.btn.ghost-light:hover {
  background: rgb(var(--bg));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(var(--shadow)/0.1);
}

/* The segment/subpage hero sits on the light site background, so the dark-bg
   ghost (white text on translucent white) is nearly invisible. Give the ghost
   CTA there ink text and a solid line for legible contrast. */
.subpage-hero .btn.ghost {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  border-color: rgb(var(--line));
  box-shadow: 0 2px 8px rgb(var(--shadow)/0.06);
}
.subpage-hero .btn.ghost:hover {
  background: rgb(var(--bg));
  box-shadow: 0 6px 18px rgb(var(--shadow)/0.1);
}

/* ── Hero — DARK ── */
.hero {
  background: rgb(var(--navy));
  border-radius: var(--r);
  padding: clamp(3.2rem,7vw,5.5rem) clamp(2rem,4.5vw,4rem) clamp(2.5rem,5vw,4rem);
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 22%, rgba(205,74,32,0.22), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(13,127,158,0.2), transparent 44%);
  pointer-events: none;
}

.hero .eyebrow { color: rgb(var(--brand)); margin-bottom: 1rem; }

.hero h1 {
  color: rgb(248 252 255);
  position: relative;
  z-index: 1;
}

.hero .lead {
  color: rgb(206 222 242);
  font-size: clamp(1.02rem, 1.35vw, 1.26rem);
  max-width: 54ch;
  margin-top: 1.1rem;
  position: relative;
  z-index: 1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.7rem;
  position: relative;
  z-index: 1;
}

.quick-points {
  list-style: none;
  padding: 0;
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0.38rem 1.2rem;
  position: relative;
  z-index: 1;
}
.quick-points li {
  color: rgb(180 202 230);
  font-size: 0.93rem;
  font-weight: 500;
}
.quick-points li::before {
  content: "✓";
  margin-right: 0.5rem;
  color: rgb(var(--brand));
  font-weight: 800;
}

.hero-showcase {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}
.hero-showcase img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 22px 44px rgba(0,0,0,0.42);
  transition: transform 0.28s ease;
}
.hero-showcase img:hover { transform: translateY(-4px) scale(1.01); }

/* ── Signal strip ── */
.signal-strip {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.signal-strip article {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-sm);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.05);
}
.signal-num {
  font-family: "Chivo Mono", monospace;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgb(var(--brand));
  margin: 0;
}
.signal-text {
  margin: 0.4rem 0 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: rgb(var(--ink-60));
}

/* ── Logo strip ── */
.logo-strip {
  margin-top: 0.8rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-sm);
  padding: 0.65rem 1rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
.logo-strip p {
  margin: 0;
  padding: 0.48rem 0.35rem;
  text-align: center;
  border: 1px solid rgb(var(--line));
  border-radius: 8px;
  font-family: "Chivo Mono", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgb(var(--ink-60));
  letter-spacing: 0.04em;
}

/* ── Metrics — DARK ── */
.metrics {
  margin-top: 1.2rem;
  background: rgb(var(--navy));
  border-radius: var(--r);
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
.metrics::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 160%, rgba(205,74,32,0.14), transparent 55%);
  pointer-events: none;
}
.metrics article {
  text-align: center;
  padding: 1.2rem 0.8rem;
  border: 1px solid rgb(var(--line-dk));
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  position: relative;
  z-index: 1;
}
.metric-value {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: rgb(var(--brand));
  font-family: "Chivo Mono", monospace;
  line-height: 1;
  margin: 0;
}
.metric-label {
  margin: 0.55rem 0 0;
  color: rgb(174 198 228);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ── Section head ── */
.section-head { margin-bottom: 0; }

/* ── Manager visibility ── */
.manager-visibility { margin-top: 4rem; }

.manager-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.manager-grid article {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.manager-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgb(var(--shadow)/0.12);
}
.manager-grid img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid rgb(var(--line));
}
.manager-grid h3 {
  margin: 1rem 1.1rem 0;
  font-size: 1.03rem;
}
.manager-grid p {
  margin: 0.5rem 1.1rem 1.2rem;
  color: rgb(var(--ink-60));
  font-size: 0.92rem;
}

/* ── Value grid ── */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.value-grid article {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
  transition: transform 0.22s ease;
}
.value-grid article:hover { transform: translateY(-3px); }
.value-grid h2 { font-size: 1.18rem; margin-bottom: 0.55rem; }
.value-grid p { color: rgb(var(--ink-60)); font-size: 0.94rem; }

/* ── Role visibility ── */
.role-visibility { margin-top: 3.5rem; }
.role-visibility-row {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.role-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgb(var(--shadow)/0.12);
}
.role-card img {
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 210px;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid rgb(var(--line));
}
.role-pos img, .role-kitchen img {
  background: rgb(var(--navy));
  object-fit: contain;
}
.role-card h3 { margin: 1rem 1.1rem 0; font-size: 1.03rem; }
.role-card p { margin: 0.5rem 1.1rem 1.2rem; color: rgb(var(--ink-60)); font-size: 0.92rem; }

/* ── Modules ── */
.modules { margin-top: 4rem; }
.module-cards {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.module-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgb(var(--shadow)/0.12);
}
.module-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid rgb(var(--line));
}
.mobile-preview-card img { object-position: top center; }
.module-card h3 { margin: 1rem 1.1rem 0; font-size: 1.03rem; }
.module-card p { margin: 0.5rem 1.1rem 1.2rem; color: rgb(var(--ink-60)); font-size: 0.92rem; }

/* hide duplicate mobile cards on desktop */
.module-card.mobile-card { display: none; }

/* ── Platforms ── */
.platforms {
  margin-top: 3rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.platforms h2 { margin: 0.4rem 0 0.8rem; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.platforms p { color: rgb(var(--ink-60)); font-size: 0.95rem; }
.platforms ul { margin: 0; padding: 0; list-style: none; }
.platforms li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgb(var(--line));
  font-size: 0.94rem;
  color: rgb(var(--ink-60));
}
.platforms li:last-child { border-bottom: 0; }
.platforms li strong { color: rgb(var(--ink)); }

/* ── Compare ── */
.compare { margin-top: 3.5rem; }
.compare-grid {
  margin-top: 1.2rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.2fr;
}
.compare-head {
  background: rgb(var(--navy));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.compare-head p {
  color: rgb(190 212 238);
  font-weight: 700;
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.compare-head p:last-child { color: rgb(var(--brand)); }
.compare-grid p {
  margin: 0;
  padding: 0.82rem 1rem;
  border-right: 1px solid rgb(var(--line));
  font-size: 0.92rem;
}
.compare-grid p:last-child { border-right: 0; }
.compare-row { border-bottom: 1px solid rgb(var(--line)); }
.compare-row:last-child { border-bottom: 0; }
.compare-row p:last-child { color: rgb(var(--teal)); font-weight: 600; }

/* ── Workflow — DARK ── */
.workflow {
  margin-top: 3.5rem;
  background: rgb(var(--navy));
  border-radius: var(--r);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.workflow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 12%, rgba(13,127,158,0.22), transparent 44%);
  pointer-events: none;
}
.workflow .section-head { position: relative; z-index: 1; }
.workflow .section-head h2 { color: rgb(248 252 255); }
.workflow .section-head p { color: rgb(174 198 228); }

.workflow-grid {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.workflow-grid article {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgb(var(--line-dk));
  border-radius: 16px;
  padding: 1.2rem;
}
.workflow-grid span {
  font-family: "Chivo Mono", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--brand));
}
.workflow-grid h3 { margin: 0.6rem 0 0; font-size: 1rem; color: rgb(248 252 255); }
.workflow-grid p { margin: 0.5rem 0 0; color: rgb(158 186 222); font-size: 0.9rem; }

/* ── Compliance ── */
.compliance {
  margin-top: 3.5rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.compliance-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.compliance-grid article {
  background: rgb(var(--bg));
  border: 1px solid rgb(var(--line));
  border-radius: 16px;
  padding: 1.3rem;
}
.compliance-grid h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.compliance-grid p { color: rgb(var(--ink-60)); font-size: 0.91rem; }

/* accounting export card — no padding, full-bleed img */
.accounting-export-card {
  padding: 0 !important;
  overflow: hidden;
}
.accounting-export-card > img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid rgb(var(--line));
  border-radius: 0;
  margin: 0;
}
.accounting-export-card > h3 { padding: 1rem 1.3rem 0; font-size: 1.02rem; }
.accounting-export-card > p { padding: 0.5rem 1.3rem 0; color: rgb(var(--ink-60)); font-size: 0.91rem; }

.export-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  padding: 0.7rem 1.3rem;
}
.export-types span {
  background: white;
  border: 1px solid rgb(var(--line));
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgb(var(--ink-60));
}

.export-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0 1.3rem;
}
.export-gallery img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgb(var(--line));
  display: block;
}

.export-preview {
  margin: 0.7rem 1.3rem 1.3rem;
  border: 1px dashed rgb(var(--line));
  background: rgb(var(--bg-2));
  border-radius: 10px;
  padding: 0.8rem;
  font-family: "Chivo Mono", monospace;
  font-size: 0.71rem;
  color: rgb(var(--ink-60));
}
.export-preview p { margin: 0.18rem 0; }
.export-preview p strong { color: rgb(var(--ink)); }

/* ── SEO block ── */
.seo-block {
  margin-top: 3rem;
  background: rgb(var(--bg-2));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.8rem 2rem;
}
.seo-block h2 { font-size: clamp(1.2rem, 2vw, 1.7rem); }
.seo-block p { margin-top: 0.7rem; color: rgb(var(--ink-60)); font-size: 0.94rem; }

/* ── Industry links ── */
.industry-links { margin-top: 3.5rem; }
.industry-grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.industry-grid article {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.3rem;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
  transition: transform 0.22s ease;
}
.industry-grid article:hover { transform: translateY(-3px); }
.industry-grid h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.industry-grid p { color: rgb(var(--ink-60)); font-size: 0.91rem; margin-bottom: 0.8rem; }
.industry-grid a {
  font-weight: 700;
  color: rgb(var(--brand));
  text-decoration: none;
  font-size: 0.89rem;
}
.industry-grid a:hover { text-decoration: underline; }

/* ── Pricing ── */
.pricing-teaser { margin-top: 3.5rem; }
.pricing-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.pricing-grid article {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.6rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
  position: relative;
  transition: transform 0.22s ease;
}
.pricing-grid article:hover { transform: translateY(-3px); }

.pricing-grid .featured {
  background: rgb(var(--navy));
  border-color: rgb(var(--brand)/0.3);
  box-shadow: 0 16px 44px rgb(var(--brand)/0.18);
}

.badge {
  display: inline-block;
  background: rgb(var(--brand));
  color: white;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.16rem 0.48rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pricing-grid h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.pricing-grid .featured h3 { color: rgb(248 252 255); }

.price { font-weight: 700; font-size: 0.93rem; color: rgb(var(--brand)); margin-bottom: 0.9rem; }

.pricing-grid ul { padding: 0; list-style: none; margin: 0 0 1.2rem; }
.pricing-grid li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgb(var(--line));
  font-size: 0.92rem;
  color: rgb(var(--ink-60));
}
.pricing-grid .featured li { border-color: rgb(var(--line-dk)); color: rgb(174 200 232); }
.pricing-grid li:last-child { border-bottom: 0; }
.pricing-grid li::before { content: "→ "; color: rgb(var(--brand)); font-weight: 700; }

/* ghost btn on light pricing cards */
.pricing-grid article:not(.featured) .btn.ghost {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  border: 1.5px solid rgb(var(--line));
}
.pricing-grid article:not(.featured) .btn.ghost:hover {
  background: rgb(var(--bg));
}

/* ── Testimonials ── */
.testimonials { margin-top: 3.5rem; }
.testimonial-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.testimonial-grid blockquote {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.6rem;
  font-weight: 500;
  font-size: 0.96rem;
  color: rgb(var(--ink));
  line-height: 1.62;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
  position: relative;
}
.testimonial-grid blockquote::before {
  content: '"';
  position: absolute;
  top: 0.2rem;
  left: 1.1rem;
  font-size: 4.5rem;
  line-height: 1;
  color: rgb(var(--brand)/0.12);
  font-family: Georgia, serif;
  font-weight: 900;
  pointer-events: none;
}
.testimonial-grid cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: rgb(var(--ink-40));
  font-style: normal;
  font-weight: 600;
}

/* ── AI assistant ── */
.ai-assistant {
  margin-top: 3.5rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.ai-intro { margin: 0.7rem 0 0; color: rgb(var(--ink-60)); font-size: 0.94rem; }
.ai-chat {
  margin-top: 1.2rem;
  border: 1px solid rgb(var(--line));
  border-radius: 14px;
  overflow: hidden;
  background: rgb(var(--bg));
}
.chat-log {
  min-height: 190px;
  max-height: 360px;
  overflow: auto;
  padding: 1rem;
  border-bottom: 1px solid rgb(var(--line));
  display: grid;
  gap: 0.65rem;
  align-content: start;
}
.msg {
  max-width: 80%;
  padding: 0.62rem 0.88rem;
  border-radius: 12px;
  font-size: 0.93rem;
}
.msg p { margin: 0; }
.msg.user { margin-left: auto; background: rgb(var(--brand)/0.1); color: rgb(var(--ink)); }
.msg.assistant { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); }
.chat-form { padding: 1rem; background: rgb(var(--surface)); }
.chat-form label { display: block; font-size: 0.87rem; font-weight: 700; margin-bottom: 0.45rem; color: rgb(var(--ink-60)); }
.chat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}
.chat-row input {
  border: 1.5px solid rgb(var(--line));
  border-radius: 8px;
  font: inherit;
  padding: 0.68rem 0.88rem;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-size: 0.92rem;
}
.chat-row input:focus { outline: none; border-color: rgb(var(--brand)); }
.chat-note { margin: 0.5rem 0 0; font-size: 0.74rem; color: rgb(var(--ink-40)); }

/* ── FAQ ── */
.faq {
  margin-top: 3.5rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.faq details { border-top: 1px solid rgb(var(--line)); padding: 0.82rem 0; }
.faq details:first-of-type { border-top: 0; margin-top: 1rem; }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.96rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.2rem; color: rgb(var(--brand)); font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0.55rem 0 0; color: rgb(var(--ink-60)); font-size: 0.93rem; }

/* ── Conversion proof ── */
.conversion-proof {
  margin-top: 3.5rem;
  background: linear-gradient(140deg, rgb(244 251 255), rgb(255 244 238));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.conversion-proof-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.conversion-proof-grid article {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 14px;
  padding: 1.2rem;
}
.conversion-proof-grid h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.conversion-proof-grid p { color: rgb(var(--ink-60)); font-size: 0.91rem; }

/* ── Demo — DARK ── */
.demo {
  margin-top: 3.5rem;
  background: rgb(var(--navy));
  border-radius: var(--r);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}
.demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 50%, rgba(205,74,32,0.18), transparent 42%),
    radial-gradient(circle at 86% 50%, rgba(13,127,158,0.15), transparent 42%);
  pointer-events: none;
}
.demo h2 {
  color: rgb(248 252 255);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  position: relative;
  z-index: 1;
}
.demo > p {
  margin: 0.75rem 0 0;
  color: rgb(180 200 228);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  position: relative;
  z-index: 1;
}
.demo-form {
  margin-top: 1.5rem;
  background: rgb(var(--surface));
  border-radius: 16px;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.demo-form label {
  display: grid;
  gap: 0.32rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(var(--ink));
}
.demo-form input,
.demo-form select {
  border: 1.5px solid rgb(var(--line));
  border-radius: 8px;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  padding: 0.72rem 0.88rem;
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.18s;
}
.demo-form input:focus,
.demo-form select:focus { outline: none; border-color: rgb(var(--brand)); }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.demo-status { font-size: 0.9rem; font-weight: 600; color: rgb(var(--teal)); }
.demo-status.error { color: rgb(193 49 32); }

/* ── Final push — BRAND gradient ── */
.final-push {
  margin-top: 1.5rem;
  background: linear-gradient(130deg, rgb(var(--brand-dk)) 0%, rgb(var(--brand)) 55%, rgb(var(--teal)) 100%);
  border-radius: var(--r);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 2rem;
  align-items: center;
}
.final-push .eyebrow { color: rgba(255,255,255,0.65); }
.final-push h2 { color: white; font-size: clamp(1.5rem, 2.9vw, 2.3rem); margin-top: 0.45rem; }
.final-push p { color: rgba(255,255,255,0.82); margin-top: 0.55rem; font-size: clamp(0.94rem, 1.05vw, 1.05rem); }
.final-push-actions { display: flex; flex-direction: column; gap: 0.6rem; }

/* ── Sticky CTA ── */
.sticky-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 0.7rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 14px;
  box-shadow: 0 12px 30px rgb(var(--shadow)/0.18);
  padding: 0.72rem 1rem;
  animation: stickyIn 0.32s ease;
}
.sticky-cta.visible { display: flex; }
.sticky-cta p { margin: 0; font-weight: 600; font-size: 0.89rem; }
.sticky-cta .btn { padding: 0.48rem 0.82rem; font-size: 0.84rem; }
.sticky-cta button {
  border: none;
  background: transparent;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  color: rgb(var(--ink-40));
}

/* ── Version alert ── */
.version-alert {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 14px;
  box-shadow: 0 12px 30px rgb(var(--shadow)/0.14);
  padding: 1rem;
  display: grid;
  gap: 0.65rem;
}
.version-alert p { margin: 0; font-weight: 700; }
.version-alert-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.version-alert .btn { padding: 0.48rem 0.72rem; font-size: 0.87rem; }

/* ── Footer ── */
.footer {
  width: min(1260px, 92vw);
  margin: 0 auto 2rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.1rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.05);
}
.footer p { margin: 0; font-size: 0.88rem; color: rgb(var(--ink-60)); }
.footer nav { display: flex; gap: 1rem; }
.footer a { color: rgb(var(--ink-40)); text-decoration: none; font-size: 0.84rem; }
.footer a:hover { color: rgb(var(--ink)); }

/* ── Subpage ── */
.breadcrumbs {
  margin-top: 0.8rem;
  display: inline-flex;
  gap: 0.4rem;
  font-family: "Chivo Mono", monospace;
  font-size: 0.74rem;
  color: rgb(var(--ink-40));
}
.breadcrumbs a { color: rgb(var(--ink-60)); text-decoration: none; }
.subpage-hero { padding: 3rem 0 1.8rem; }
.subpage-hero h1 { max-width: 16ch; }
.subpage-content { display: grid; gap: 1rem; }
.subpage-content section {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
}
.subpage-content h2 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); margin-bottom: 0.5rem; }
.subpage-content p { color: rgb(var(--ink-60)); font-size: 0.94rem; }
.subpage-content ul { margin: 0.7rem 0 0; padding-left: 1.2rem; }

/* ── Device Frames ── */

/* Hero showcase layout with devices */
.hero-showcase {
  grid-template-columns: 1.7fr 1fr 1.3fr;
  align-items: flex-end;
  gap: 1rem;
}

/* ---- Browser frame (desktop/admin) ---- */
.dev-browser {
  display: flex;
  flex-direction: column;
  border-radius: 12px 12px 8px 8px;
  overflow: hidden;
  background: #1c2035;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
}

.dev-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: #141626;
  flex-shrink: 0;
}

.dev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.d-red { background: #ff5f57; }
.d-yel { background: #ffbd2e; }
.d-grn { background: #28ca41; }

.dev-url-bar {
  margin-left: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 2px 10px;
  font-family: "Chivo Mono", monospace;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.42);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-browser img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---- Phone frame ---- */
.dev-phone {
  display: flex;
  justify-content: center;
}

.dev-phone-shell {
  background: #16182a;
  border-radius: 40px;
  border: 3px solid rgba(255,255,255,0.12);
  box-shadow:
    0 32px 64px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 16px rgba(0,0,0,0.4);
  padding: 16px 8px 20px;
  position: relative;
  width: 100%;
  max-width: 200px;
}

.dev-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 10px;
  background: #0a0c18;
  border-radius: 999px;
  z-index: 2;
}

.dev-phone-shell img {
  width: 100%;
  border-radius: 28px;
  display: block;
  object-fit: cover;
  object-position: top;
  aspect-ratio: 9/19.5;
}

.dev-home-bar {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  margin: 10px auto 0;
}

/* ---- Tablet frame ---- */
.dev-tablet {
  display: flex;
  flex-direction: column;
}

.dev-tablet-shell {
  background: #1a1d30;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,0.13);
  padding: 12px 8px;
  box-shadow: 0 28px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
}
.dev-tablet-shell::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  margin: 0 auto 6px;
}

.dev-tablet-shell img {
  width: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

/* ---- Role visibility device wrappers ---- */
.role-device-wrap {
  background: rgb(var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  border-bottom: 1px solid rgb(var(--line));
  min-height: 240px;
}

.dev-phone-inline {
  display: flex;
  justify-content: center;
}

.dev-phone-inline .dev-phone-shell {
  max-width: 140px;
  border-radius: 28px;
  padding: 10px 6px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
}

.dev-phone-inline .dev-notch {
  width: 38px;
  height: 8px;
}

.dev-phone-inline .dev-phone-shell img {
  border-radius: 20px;
}

.dev-tablet-inline .dev-tablet-shell {
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.dev-browser-inline {
  width: 100%;
  border-radius: 10px 10px 6px 6px;
  overflow: hidden;
  background: #1c2035;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.dev-browser-inline .dev-browser-bar {
  padding: 5px 8px;
}

.dev-browser-inline img {
  width: 100%;
  display: block;
}

/* role-card no longer has its own image — override the img rules */
.role-card .role-device-wrap img {
  width: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  min-height: auto;
}

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ── Keyframes ── */
@keyframes stickyIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Theme tokens ── */
html[data-theme="ocean"] {
  --brand: 205 74 32; --brand-dk: 160 52 18;
  --navy: 10 16 32; --navy-card: 18 28 50;
  --teal: 13 127 158;
  --ink: 12 18 34; --ink-60: 68 84 112; --ink-40: 128 148 178;
  --surface: 255 255 255; --bg: 246 249 253; --bg-2: 236 243 251;
  --line: 216 226 240; --line-dk: 44 62 92; --shadow: 10 18 42;
}

html[data-theme="graphite"] {
  --brand: 90 156 214; --brand-dk: 62 122 182;
  --navy: 18 24 38; --navy-card: 26 34 54;
  --teal: 42 158 138;
  --ink: 22 30 46; --ink-60: 82 96 120; --ink-40: 136 152 180;
  --surface: 252 254 255; --bg: 236 241 248; --bg-2: 226 233 244;
  --line: 208 218 234; --line-dk: 50 68 98; --shadow: 16 26 48;
}
html[data-theme="graphite"] .site-bg {
  background: linear-gradient(160deg, rgb(var(--bg)) 0%, rgb(var(--bg-2)) 100%);
}

html[data-theme="sand"] {
  --brand: 191 95 43; --brand-dk: 152 66 24;
  --navy: 38 28 18; --navy-card: 54 40 24;
  --teal: 83 130 124;
  --ink: 48 37 28; --ink-60: 104 86 72; --ink-40: 158 136 118;
  --surface: 255 252 246; --bg: 250 245 236; --bg-2: 242 233 218;
  --line: 228 214 196; --line-dk: 98 72 52; --shadow: 66 44 30;
}
html[data-theme="sand"] .site-bg {
  background: linear-gradient(160deg, rgb(var(--bg)) 0%, rgb(var(--bg-2)) 100%);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .value-grid, .role-visibility-row, .module-cards, .manager-grid,
  .compliance-grid, .hero-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-strip, .metrics, .workflow-grid,
  .logo-strip, .pricing-grid, .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-push { grid-template-columns: 1fr; }
  .final-push-actions { flex-direction: row; }
  /* Comparison table → stacked labelled cards on mobile. The 3-column grid
     (header + rows) collapsed to one column detached the headers from cells;
     instead hide the header and label each cell inline via data-label. */
  .compare-head { display: none; }
  .compare-row { display: block; grid-template-columns: none; padding: 0.95rem 1.1rem; }
  .compare-grid .compare-row p { border: 0; padding: 0.2rem 0; }
  .compare-row p:first-child { font-weight: 800; font-size: 1.02rem; color: rgb(var(--ink)); margin-bottom: 0.35rem; }
  .compare-row p[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: rgb(var(--ink-60)); }
  .platforms { grid-template-columns: 1fr; }
  .conversion-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { max-width: 14ch; }
  .section-head h2 { max-width: 20ch; }
  .theme-switcher { display: none; }
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    left: 0.8rem; right: 0.8rem;
    top: calc(100% + 0.5rem);
    background: rgb(var(--surface));
    border: 1px solid rgb(var(--line));
    border-radius: 14px;
    box-shadow: 0 12px 30px rgb(var(--shadow)/0.14);
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    display: none;
    z-index: 50;
  }
  .main-nav.open { display: flex; }
  .main-nav a { font-size: 1rem; padding: 0.45rem 0; }
  .quick-points { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  h1 { max-width: none; }
  main { width: min(1260px, 95vw); }
  .value-grid, .role-visibility-row, .module-cards, .manager-grid,
  .signal-strip, .compliance-grid, .workflow-grid, .hero-showcase,
  .logo-strip, .metrics, .pricing-grid, .testimonial-grid,
  .conversion-proof-grid, .export-gallery { grid-template-columns: 1fr; }
  .msg { max-width: 100%; }
  .chat-row { grid-template-columns: 1fr; }
  .hero { padding: 2.5rem 1.5rem 2rem; border-radius: 16px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); max-width: none; }
  .metrics { padding: 1.8rem 1.2rem; border-radius: 16px; }
  .workflow { padding: 2rem 1.4rem; border-radius: 16px; }
  .demo { padding: 2rem 1.2rem; border-radius: 16px; }
  .final-push { grid-template-columns: 1fr; padding: 1.8rem 1.4rem; border-radius: 16px; }
  .final-push-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .sticky-cta { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; flex-wrap: wrap; }
  /* On mobile the full-width sticky demo-bar collided with the contact FAB.
     Keep the FAB (sole entry to the contact window); drop the redundant
     sticky nudge — demo CTAs already appear throughout the page. */
  .sticky-cta.visible { display: none; }
  .ea-banner { font-size: 0.82rem; padding: 0.55rem 1rem; gap: 0.5rem; }
}

/* ── Early adopter banner ──────────────────────────────────── */
.ea-banner {
  position: relative;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgb(var(--brand));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.5rem;
  text-align: center;
}
.ea-banner strong { font-weight: 700; }
.ea-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 0.35rem;
  white-space: nowrap;
}
.ea-link:hover { opacity: 0.85; }
.ea-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.25rem;
  flex-shrink: 0;
}
.ea-close:hover { color: #fff; }

/* ── Pricing promo badge ───────────────────────────────────── */
.badge-promo {
  display: inline-block;
  background: rgba(205,74,32,0.15);
  color: rgb(var(--brand));
  border: 1px solid rgba(205,74,32,0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* ── Compliance / Trust (skladnost) ── */
.compliance-trust { margin-top: 4rem; }
.trust-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.trust-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgb(var(--shadow)/0.10);
}
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.5rem;
  border-radius: var(--r-sm);
  background: rgb(var(--brand)/0.08);
  margin-bottom: 0.9rem;
}
.trust-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; color: rgb(var(--ink)); }
.trust-card p { color: rgb(var(--ink-60)); font-size: 0.92rem; }
.trust-note {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid rgb(var(--brand));
  background: rgb(var(--brand)/0.05);
  border-radius: var(--r-sm);
  color: rgb(var(--ink-60));
  font-size: 0.9rem;
}

/* ── Payments (placila) ── */
.payments { margin-top: 4rem; }
.payments-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.pay-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-top: 3px solid rgb(var(--teal));
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pay-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgb(var(--shadow)/0.10);
}
.pay-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; color: rgb(var(--ink)); }
.pay-card p { color: rgb(var(--ink-60)); font-size: 0.92rem; }

@media (max-width: 980px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .trust-grid, .payments-grid { grid-template-columns: 1fr; }
}

/* ── Savings estimator (izračun) ── */
[data-mono] { font-family: "Chivo Mono", monospace; }
.roi { margin-top: 4rem; }
.roi-card {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.07);
}
.roi-inputs { display: flex; flex-direction: column; gap: 1rem; }
.roi-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(var(--ink-60));
}
.roi-inputs input {
  font-family: "Chivo Mono", monospace;
  font-size: 1.05rem;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid rgb(var(--line));
  border-radius: var(--r-sm);
  background: rgb(var(--bg));
  color: rgb(var(--ink));
}
.roi-inputs input:focus { outline: none; border-color: rgb(var(--brand)); }
.roi-output {
  background: rgb(var(--navy-card));
  color: rgb(248 252 255);
  border-radius: var(--r);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
}
.roi-big { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1; }
.roi-unit { font-size: 1rem; font-weight: 600; opacity: 0.8; }
.roi-sub { font-size: 0.85rem; opacity: 0.75; }
.roi-detail {
  margin: 0.8rem 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  padding-top: 0.8rem;
}
.roi-detail p { display: flex; justify-content: space-between; font-size: 0.85rem; opacity: 0.9; margin: 0; }
.roi-detail strong { font-weight: 700; }
.roi-output .btn { margin-top: 0.7rem; text-align: center; }
.roi-note { margin-top: 1rem; font-size: 0.82rem; color: rgb(var(--ink-40)); }

@media (max-width: 720px) {
  .roi-card { grid-template-columns: 1fr; }
}

/* ── Interactive product tour (tura) ── */
.tour { margin-top: 4rem; }
.tour-wrap {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.5rem;
  align-items: start;
}
.tour-steps { display: flex; flex-direction: column; gap: 0.6rem; }
.tour-step {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  text-align: left;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-sm);
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.tour-step:hover { border-color: rgb(var(--brand)/0.4); }
.tour-step.is-active {
  border-color: rgb(var(--brand));
  background: rgb(var(--brand)/0.05);
  box-shadow: 0 4px 16px rgb(var(--shadow)/0.06);
}
.tour-num { font-size: 1.1rem; font-weight: 800; color: rgb(var(--brand)); flex: 0 0 auto; }
.tour-text { display: flex; flex-direction: column; min-width: 0; }
.tour-text strong { color: rgb(var(--ink)); font-size: 0.98rem; }
.tour-text span { color: rgb(var(--ink-60)); font-size: 0.84rem; }
.tour-preview .dev-browser { margin: 0; }
.tour-preview #tourImg { transition: opacity 0.18s ease; }
.tour-caption { margin-top: 1rem; color: rgb(var(--ink-60)); font-size: 0.92rem; }

@media (max-width: 860px) {
  .tour-wrap { grid-template-columns: 1fr; }
}

/* ── Why-not-generic comparison (vs) ── */
.vs { margin-top: 4rem; }
.vs-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vs-card { border-radius: var(--r); padding: 1.75rem; }
.vs-generic { background: rgb(var(--bg-2)); border: 1px solid rgb(var(--line)); }
.vs-generic h3 { color: rgb(var(--ink-60)); }
.vs-us {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--brand)/0.35);
  border-top: 3px solid rgb(var(--brand));
  box-shadow: 0 8px 24px rgb(var(--shadow)/0.08);
  position: relative;
}
.vs-badge {
  position: absolute;
  top: -0.7rem;
  right: 1.25rem;
  background: rgb(var(--brand));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.vs-card h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.vs-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vs-card li { position: relative; padding-left: 1.6rem; font-size: 0.92rem; color: rgb(var(--ink-60)); }
.vs-generic li::before { content: "✕"; position: absolute; left: 0; color: rgb(var(--ink-40)); font-weight: 700; }
.vs-us li { color: rgb(var(--ink)); }
.vs-us li::before { content: "✓"; position: absolute; left: 0; color: rgb(var(--brand)); font-weight: 800; }

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

/* ── Contact window (okno / vprašanje) ── */
.contact-fab {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgb(var(--brand));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(var(--brand)/0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}
.contact-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(var(--brand)/0.45); }
.contact-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.contact-modal[hidden] { display: none; }
.contact-backdrop { position: absolute; inset: 0; background: rgb(var(--navy)/0.55); backdrop-filter: blur(4px); }
.contact-dialog {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  background: rgb(var(--surface));
  border-radius: var(--r);
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgb(var(--shadow)/0.30);
  max-height: 90vh;
  overflow-y: auto;
}
.contact-x { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none; font-size: 1.6rem; line-height: 1; color: rgb(var(--ink-60)); cursor: pointer; }
.contact-dialog h2 { font-size: 1.35rem; margin: 0.3rem 0 0.4rem; }
.contact-intro { color: rgb(var(--ink-60)); font-size: 0.92rem; margin-bottom: 1.1rem; }
.contact-form { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-form > label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: rgb(var(--ink-60)); }
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid rgb(var(--line));
  border-radius: var(--r-sm);
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  resize: vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: rgb(var(--brand)); }
.contact-form .btn { margin-top: 0.3rem; text-align: center; }
.contact-status { font-size: 0.85rem; margin: 0.2rem 0 0; }
.contact-status.ok { color: rgb(var(--teal)); font-weight: 600; }
.contact-status.err { color: rgb(200 60 40); font-weight: 600; }

@media (max-width: 560px) {
  .contact-fab { bottom: 0.9rem; left: 0.9rem; padding: 0.6rem 0.9rem; font-size: 0.84rem; }
}

/* ── Pricing: real EUR prices + founding-offer line ── */
.pricing-grid .price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0.1rem 0 0.15rem;
}
.pricing-grid .price strong { font-size: 1.9rem; font-weight: 800; color: rgb(var(--ink)); }
.pricing-grid .price span { font-size: 0.9rem; font-weight: 600; color: rgb(var(--ink-60)); }
.pricing-grid .featured .price strong { color: rgb(248 252 255); }
.pricing-grid .featured .price span { color: rgb(174 200 232); }
.price-promo { font-size: 0.82rem; color: rgb(var(--brand)); margin: 0 0 0.9rem; }
.price-promo strong { color: rgb(var(--brand)); font-weight: 800; }
.pricing-grid .featured .price-promo { color: rgb(255 178 150); }
.pricing-grid .featured .price-promo strong { color: rgb(255 178 150); }
.pricing-note { margin-top: 1.25rem; font-size: 0.85rem; color: rgb(var(--ink-60)); text-align: center; }

/* ── Price guarantee band ── */
.guarantee {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgb(var(--brand)/0.06);
  border: 1px solid rgb(var(--brand)/0.30);
  border-radius: var(--r);
  padding: 1.1rem 1.35rem;
}
.guarantee-icon { font-size: 1.8rem; flex: 0 0 auto; line-height: 1; }
.guarantee p { margin: 0; font-size: 0.95rem; color: rgb(var(--ink)); line-height: 1.5; }
.guarantee strong { color: rgb(var(--brand)); }
@media (max-width: 560px) {
  .guarantee { align-items: flex-start; }
}

/* Promise section reuses .trust-grid/.trust-card */
.promise { margin-top: 4rem; }

/* ── Analytics + AI marketing section ── */
.analytics-mkt { margin-top: 4rem; }
.analytics-shot {
  margin: 2rem auto 0;
  max-width: 960px;
  border: 1px solid rgb(var(--line));
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 24px 60px rgb(var(--shadow)/0.18);
}
.analytics-shot img { display: block; width: 100%; height: auto; }
.analytics-shot figcaption {
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: rgb(var(--ink-60));
  border-top: 1px solid rgb(var(--line));
  text-align: center;
}
.analytics-cta { margin-top: 1.5rem; text-align: center; }
.pricing-cta { margin-top: 1.75rem; text-align: center; }
.analytics-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 980px) { .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .analytics-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   Language switcher (SL / HR / EN) — always visible, incl. mobile
   ══════════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: inline-flex;
  gap: 0.3rem;
  flex: 0 0 auto;
  align-items: center;
}
.lang-btn {
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--ink-60));
  border-radius: 999px;
  padding: 0.24rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.16s;
}
.lang-btn:hover { border-color: rgb(var(--brand)); color: rgb(var(--ink)); }
.lang-btn.is-active {
  background: rgb(var(--brand));
  color: #fff;
  border-color: rgb(var(--brand));
}

/* ══════════════════════════════════════════════════════════════════
   Native terminal app — device frames + showcase
   ══════════════════════════════════════════════════════════════════ */
.native-app { margin-top: 3.5rem; }
.native-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 2rem 0 2.75rem;
}
.native-frame {
  margin: 0;
  background: #14162a;
  border-radius: 30px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 26px 52px rgba(8, 14, 30, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 10px 10px 6px;
  width: 100%;
  max-width: 214px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.native-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px rgba(8, 14, 30, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.native-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
.native-frame figcaption {
  color: rgb(var(--ink-60));
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
  padding: 0.6rem 0.2rem 0.2rem;
}
@media (max-width: 640px) {
  .native-frame { max-width: 158px; }
  .native-frame figcaption { font-size: 0.66rem; }
}

/* Brand mark (Krog) in the header — replaces the old .brand-dot */
.brand-mark { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0; display: block; }
/* Keep the header from wrapping awkwardly once lang + theme switchers are both present */
.topbar { flex-wrap: wrap; row-gap: 0.5rem; }
@media (max-width: 780px) {
  /* On mobile the nav collapses to a dropdown; keep brand + lang + Meni on one row */
  .lang-switcher { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; }
}

/* ── Feature showcase rows (alternating image / benefit copy) ─────────────── */
.feature-flow { display: flex; flex-direction: column; gap: 5rem; margin-top: 3.5rem; }
.feature-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
.feature-row.portrait { grid-template-columns: 0.8fr 1.2fr; }
.feature-row:nth-child(even) .feature-media { order: 2; }
.feature-copy .feat-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--brand));
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.feature-copy h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  color: rgb(var(--ink));
}
.feature-copy > p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgb(var(--ink-60));
  margin-bottom: 1.3rem;
}
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.feature-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.96rem;
  line-height: 1.45;
  color: rgb(var(--ink));
}
.feature-list li strong { color: rgb(var(--ink)); font-weight: 700; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15rem;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: rgb(var(--brand) / 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cd4a20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.8rem;
  background-repeat: no-repeat;
  background-position: center;
}
.feature-media .dev-browser img,
.feature-media .dev-phone img { width: 100%; height: auto; display: block; }
.feature-media .dev-phone { max-width: 300px; margin: 0 auto; }
/* The KDS is a wide 4-column board; in the portrait phone frame the default
   centre crop (object-position: top → horizontal centre) shows only the
   V pripravi + Pripravljeno columns, so the panel reads as "everything is
   ready". Shift this one image's crop to the left so the NOVO column (open
   orders waiting) is what you see — a real kitchen queue. */
.feature-media .dev-phone img[src*="30-pos-orders"] { object-position: left top; }
@media (max-width: 820px) {
  .feature-row, .feature-row.portrait { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature-row:nth-child(even) .feature-media { order: -1; }
  .feature-media .dev-phone { max-width: 260px; }
}

/* ── Live flow demo — animated order → kitchen → notification → manager ─────── */
.liveflow { margin-top: 3.5rem; }

/* ── Live product reel (#v-zivo) — a cinematic tour of the WHOLE product ──────
   A fixed-height "screen" crossfades through 15 real scenes, switching between a
   desktop browser frame and a phone frame (incl. a push-notification moment).
   A simulated cursor clicks the hotspots; badges/captions come from #reelSrc
   (translated in place) and images swap to .hr/.en variants — fully trilingual. */
.reel { max-width: 1000px; margin: 0 auto; }
.reel-viewport {
  position: relative;
  height: 600px;
  background: radial-gradient(120% 100% at 50% 0%, #12172a 0%, #0b0e1a 70%);
  border-radius: 16px;
  overflow: hidden;
}
.reel-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.reel-layer.is-on { opacity: 1; }

/* Desktop browser frame fills the stage; the shot contains below the chrome bar */
.reel-browser { width: 100%; height: 100%; display: flex; flex-direction: column; }
.reel-browser .dev-browser-bar { flex: 0 0 auto; }
.reel-browser .reel-shot {
  flex: 1 1 auto; min-height: 0; width: 100%;
  object-fit: contain; object-position: center top;
  border-top: 0; background: transparent; display: block;
}
/* Phone frame is height-driven so portrait shots read as a real device */
.reel-phone .dev-phone-shell { max-width: none; width: auto; padding: 14px 7px 16px; }
.reel-phone .reel-shot {
  height: 512px; width: auto; aspect-ratio: 720 / 1258;
  object-fit: cover; object-position: top; border-radius: 24px; display: block;
}

/* Push-notification banner (the "waiter gets notified" beat) */
.reel-notif {
  position: absolute; top: 22px; left: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; gap: 0.55rem;
  background: rgba(18, 22, 38, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px; padding: 0.6rem 0.7rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  animation: reel-notif-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes reel-notif-in {
  from { opacity: 0; transform: translateY(-140%); }
  to   { opacity: 1; transform: translateY(0); }
}
.reel-notif-ic { font-size: 1.35rem; line-height: 1; }
.reel-notif-t { font-weight: 800; color: #eaf0fb; font-size: 0.82rem; }
.reel-notif-s { color: rgba(226, 233, 246, 0.66); font-size: 0.7rem; margin-top: 1px; }

.reel-badge {
  position: absolute; top: 16px; left: 16px; z-index: 6;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
  color: #fff; background: rgb(var(--brand));
  padding: 0.32rem 0.72rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgb(var(--brand) / 0.45);
}

.reel-cursor {
  position: absolute; z-index: 7; top: 0; left: 0;
  width: 26px; height: 26px; pointer-events: none;
  transform: translate(-140px, -140px);
  transition: transform 0.85s cubic-bezier(0.5, 0.05, 0.2, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  opacity: 0;
}
.reel-cursor.is-on { opacity: 1; }
.reel-cursor svg { fill: #fff; stroke: #10131f; stroke-width: 1.1; display: block; }
.reel-cursor::after {
  content: ""; position: absolute; left: 5px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgb(var(--brand)); opacity: 0;
}
.reel-cursor.is-click::after { animation: reel-ripple 0.5s ease-out; }
@keyframes reel-ripple {
  from { opacity: 0.95; transform: scale(0.4); }
  to   { opacity: 0; transform: scale(3.6); }
}

.reel-caption {
  margin: 1.15rem auto 0; max-width: 680px; text-align: center;
  color: rgb(var(--ink-60)); font-size: 1rem; line-height: 1.5; min-height: 3em;
}
.reel-caption b, .reel-caption strong { color: rgb(var(--ink)); font-weight: 700; }

.reel-dots {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  justify-content: center; margin: 1rem auto 0; max-width: 560px;
}
.reel-dot {
  width: 22px; height: 5px; border-radius: 999px; border: 0;
  background: rgb(var(--ink-40) / 0.3); cursor: pointer; padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.reel-dot:hover { background: rgb(var(--ink-40) / 0.6); }
.reel-dot.is-on { background: rgb(var(--brand)); transform: scaleY(1.5); }

.reel-static-list { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.reel-static-list p {
  margin: 0; padding: 0.6rem 0.85rem; border: 1px solid rgb(var(--line));
  border-radius: 12px; font-size: 0.88rem; color: rgb(var(--ink-60)); line-height: 1.45;
}
.reel-static-list b { color: rgb(var(--ink)); }

@media (prefers-reduced-motion: reduce) {
  .reel-cursor { display: none; }
  .reel-layer { transition: none; }
  .reel-notif { animation: none; }
}
@media (max-width: 820px) {
  .reel-viewport { height: 460px; }
  .reel-layer { padding: 12px; }
  .reel-phone .reel-shot { height: 372px; }
  .reel-caption { font-size: 0.92rem; }
}

/* ============================================================
   3-screen hero — order → kitchen → notification, live
   Story runs across 3 real screens (till · kitchen · manager),
   driven by [data-beat="1..4"] on #trio (app.js). On-brand glow
   follows the active screen; a token rides the rail between them.
   ============================================================ */
.trio {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1.12fr 1.66fr;
  align-items: center;
  gap: clamp(0.55rem, 2.2vw, 1.5rem);
  margin-top: 1.6rem;
  padding-top: 30px;
}
.trio-dev {
  position: relative; margin: 0;
  filter: saturate(0.92) brightness(0.82);
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.3,1), filter 0.5s ease;
}
.trio-dev .dev-phone-shell,
.trio-dev .dev-tablet-shell,
.trio-dev .dev-browser { transition: box-shadow 0.5s ease; }
/* active screen per beat */
.trio[data-beat="1"] .trio-till,
.trio[data-beat="2"] .trio-kitchen,
.trio[data-beat="3"] .trio-kitchen,
.trio[data-beat="4"] .trio-manager {
  filter: none; transform: translateY(-4px) scale(1.02); z-index: 6;
}
.trio[data-beat="1"] .trio-till .dev-phone-shell,
.trio[data-beat="2"] .trio-kitchen .dev-tablet-shell,
.trio[data-beat="3"] .trio-kitchen .dev-tablet-shell,
.trio[data-beat="4"] .trio-manager .dev-browser {
  box-shadow: 0 0 0 2px rgb(var(--brand)), 0 0 30px 5px rgba(var(--brand),0.5),
              0 26px 56px rgba(0,0,0,0.55);
}
/* full coloured grid — show native shot uncropped */
.trio-till .dev-phone-shell { max-width: 208px; }
.trio-till .dev-phone-shell img { aspect-ratio: 828 / 1447; }
/* kitchen shot is a tall portrait — crop to a balanced square tablet window */
/* Same wide KDS board as the feature section: a 1:1 centre crop hides the NOVO
   column, so shift left to keep the open-orders queue visible (see the
   feature-media rule above). */
.trio-kitchen .dev-tablet-shell img { aspect-ratio: 1 / 1; object-fit: cover; object-position: left top; }
.trio-manager .dev-browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* label under each device */
.trio-tag {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  margin-top: 0.75rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.trio-num {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 0.64rem; font-weight: 800;
  transition: background 0.4s ease;
}
.trio[data-beat="1"] .trio-till .trio-num,
.trio[data-beat="2"] .trio-kitchen .trio-num,
.trio[data-beat="3"] .trio-kitchen .trio-num,
.trio[data-beat="4"] .trio-manager .trio-num { background: rgb(var(--brand)); }

/* rail + travelling token (the connective tissue) */
.trio-rail {
  position: absolute; top: 8px; left: 9%; right: 9%; height: 2px; z-index: 4; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 14%, rgba(255,255,255,0.16) 86%, transparent);
}
.trio-token {
  position: absolute; top: 1px; left: 8%; width: 11px; height: 11px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: rgb(var(--brand));
  box-shadow: 0 0 0 4px rgba(var(--brand),0.25), 0 0 16px 4px rgba(var(--brand),0.85);
  transition: left 0.85s cubic-bezier(0.5,0,0.2,1);
}
.trio[data-beat="1"] .trio-token { left: 8%; }
.trio[data-beat="2"] .trio-token { left: 47%; }
.trio[data-beat="3"] .trio-token { left: 47%; }
.trio[data-beat="4"] .trio-token { left: 90%; }

/* till: tap ring on a coloured button (beat 1) */
.trio-ring {
  position: absolute; z-index: 5; left: 22%; top: 27%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgb(var(--brand));
  box-shadow: 0 0 14px 2px rgba(var(--brand), 0.7), inset 0 0 10px rgba(var(--brand), 0.4);
  opacity: 0; pointer-events: none;
}
.trio[data-beat="1"] .trio-ring { animation: trio-tap 1.05s ease-out 2; }
@keyframes trio-tap {
  0% { opacity: 0.9; transform: scale(0.4); }
  70% { opacity: 0.3; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* kitchen: KDS status pill (beat 2 NOVO → beat 3/4 PRIPRAVLJENO) */
.trio-status { position: absolute; z-index: 4; top: 12px; right: 12px; display: flex; gap: 6px; }
.trio-status .st {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px;
  opacity: 0; transform: translateY(-5px) scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.st-novo { background: #f5a524; color: #241400; }
.st-ready { background: #2fbf5b; color: #042713; }
.trio[data-beat="2"] .st-novo { opacity: 1; transform: none; animation: trio-pop 0.5s; }
.trio[data-beat="3"] .st-ready,
.trio[data-beat="4"] .st-ready { opacity: 1; transform: none; }
.trio[data-beat="3"] .st-ready { animation: trio-pop 0.5s; }
@keyframes trio-pop { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.14)} 100%{transform:scale(1);opacity:1} }

/* till: push notification (beat 4) */
.trio-notif {
  position: absolute; z-index: 7; top: 20px; left: 8px; right: 8px;
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(15,19,33,0.95); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 13px; padding: 0.5rem 0.6rem; box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(-150%); pointer-events: none;
}
.trio[data-beat="4"] .trio-notif { animation: trio-notif-in 0.55s cubic-bezier(0.2,0.9,0.3,1.2) forwards; }
@keyframes trio-notif-in { from{opacity:0;transform:translateY(-150%)} to{opacity:1;transform:translateY(0)} }
.trio-notif-ic { font-size: 1.1rem; line-height: 1; }
.trio-notif-t { font-weight: 800; color: #eaf0fb; font-size: 0.72rem; }
.trio-notif-s { color: rgba(226,233,246,0.66); font-size: 0.61rem; margin-top: 1px; }

/* manager: live revenue bump (beat 4) */
.trio-money {
  position: absolute; z-index: 4; bottom: 12px; right: 12px;
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(15,19,33,0.92); border: 1px solid rgba(47,191,91,0.5);
  border-radius: 10px; padding: 0.34rem 0.6rem; font-size: 0.66rem; color: rgba(255,255,255,0.78);
  opacity: 0; transform: translateY(7px); transition: opacity 0.4s ease, transform 0.4s ease;
}
.trio-money b { color: #43d17a; font-family: "Chivo Mono", monospace; font-weight: 800; }
.trio[data-beat="4"] .trio-money { opacity: 1; transform: none; animation: trio-pop 0.5s; }

/* changing caption */
.trio-caption {
  grid-column: 1 / -1; text-align: center; margin: 1.15rem auto 0; max-width: 44ch;
  font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.82); min-height: 1.4em;
}

/* responsive: stack on small screens, rail becomes vertical-agnostic (hidden) */
@media (max-width: 720px) {
  .trio { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 0; max-width: 340px; margin-inline: auto; }
  .trio-rail { display: none; }
  .trio-till .dev-phone-shell { max-width: 220px; margin: 0 auto; }
  .trio-manager, .trio-kitchen { max-width: 320px; margin: 0 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .trio-dev, .trio-token, .trio-num { transition: none; }
  .trio-ring { display: none; }
  .trio-dev { filter: none; }
  .trio .st-ready, .trio .trio-money { opacity: 1 !important; transform: none !important; animation: none !important; }
  .trio-notif { display: none; }
}

/* ═══ Trust strip (#zaupanje) — honest social proof ═════════════════════════ */
.trust-strip { max-width: 1160px; margin: 0 auto; padding: 2.4rem clamp(1rem,4vw,3rem) 0.5rem; text-align: center; }
.trust-strip .eyebrow { justify-content: center; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.55rem; margin: 0.9rem auto 1.1rem; }
.trust-badge { font-family: "Chivo Mono", monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; color: rgb(var(--ink-60)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 999px; padding: 0.35rem 0.85rem; white-space: nowrap; }
.trust-line { color: rgb(var(--ink-60)); max-width: 62ch; margin: 0 auto 2rem; font-size: 0.98rem; }
.trust-proof { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: center; text-align: left; }
.founder-quote { margin: 0; background: rgb(var(--brand)/0.05); border: 1px solid rgb(var(--brand)/0.22); border-left: 3px solid rgb(var(--brand)); border-radius: var(--r); padding: 1.35rem 1.55rem; }
.founder-quote p { font-size: 1.14rem; line-height: 1.5; color: rgb(var(--ink)); margin: 0 0 0.7rem; }
.founder-quote cite { font-style: normal; font-size: 0.86rem; color: rgb(var(--ink-60)); }
.trust-stats { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.95rem; }
.trust-stats li { display: grid; padding-left: 0.95rem; border-left: 2px solid rgb(var(--brand)/0.4); }
.trust-stats b { font-size: 0.98rem; color: rgb(var(--ink)); }
.trust-stats span { font-size: 0.86rem; color: rgb(var(--ink-60)); }
@media (max-width: 720px) { .trust-proof { grid-template-columns: 1fr; } }

/* ═══ Live-sale demo (#ziva-prodaja) — sale → fiscalized, in motion ═════════ */
.livesale { max-width: 1080px; margin: 0 auto; padding: clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem); }
.ls-stage { display: grid; grid-template-columns: minmax(0,358px) 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; margin-top: 2rem; }
.ls-till { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 18px; padding: 1.05rem 1.2rem 1.3rem; box-shadow: 0 14px 44px rgb(var(--shadow)/0.12); position: relative; overflow: hidden; }
.ls-till-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: rgb(var(--ink-60)); padding-bottom: 0.7rem; border-bottom: 1px solid rgb(var(--line)); }
.ls-live { font-family: "Chivo Mono", monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--brand)); display: inline-flex; align-items: center; gap: 0.4rem; }
.ls-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--brand)); animation: lsPulse 1.6s infinite; }
@keyframes lsPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ls-cart { list-style: none; margin: 0; padding: 0.6rem 0; min-height: 176px; display: flex; flex-direction: column; gap: 0.5rem; }
.ls-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; opacity: 0; transform: translateY(8px); animation: lsIn 0.35s forwards; }
.ls-item .n { color: rgb(var(--ink)); font-size: 0.95rem; }
.ls-item .p { font-family: "Chivo Mono", monospace; color: rgb(var(--ink-60)); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
@keyframes lsIn { to { opacity: 1; transform: none; } }
.ls-total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.7rem; border-top: 1px solid rgb(var(--line)); }
.ls-total-row span { color: rgb(var(--ink-60)); font-size: 0.9rem; }
.ls-total { font-family: "Chivo Mono", monospace; font-size: 1.5rem; font-weight: 700; color: rgb(var(--ink)); font-variant-numeric: tabular-nums; }
.ls-pay { margin-top: 1rem; width: 100%; border: 0; border-radius: 12px; background: rgb(var(--brand)); color: #fff; font-family: "Archivo", sans-serif; font-weight: 700; letter-spacing: 0.05em; font-size: 1rem; padding: 0.85rem; cursor: default; transition: transform 0.15s ease, box-shadow 0.3s ease; }
.ls-pay.is-hot { box-shadow: 0 0 0 4px rgb(var(--brand)/0.22); transform: scale(1.02); }
.ls-stamp { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.3rem; display: flex; align-items: center; gap: 0.8rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--brand)/0.5); border-radius: 12px; padding: 0.8rem 1rem; box-shadow: 0 12px 34px rgb(var(--shadow)/0.20); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.ls-stamp.is-on { opacity: 1; transform: none; }
.ls-check { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgb(var(--brand)); color: #fff; display: grid; place-items: center; font-weight: 700; }
.ls-stamp b { display: block; color: rgb(var(--ink)); font-size: 0.95rem; }
.ls-zoi { font-family: "Chivo Mono", monospace; font-size: 0.76rem; color: rgb(var(--ink-60)); }
.ls-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; counter-reset: ls; }
.ls-steps li { position: relative; padding-left: 3rem; color: rgb(var(--ink-60)); font-size: 1.02rem; counter-increment: ls; }
.ls-steps li b { color: rgb(var(--ink)); }
.ls-steps li::before { content: counter(ls); position: absolute; left: 0; top: -3px; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(var(--brand)/0.1); color: rgb(var(--brand)); font-family: "Chivo Mono", monospace; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 720px) { .ls-stage { grid-template-columns: 1fr; } .ls-till { max-width: 358px; margin: 0 auto; } }

/* ═══ Savings calculator (#calc) — interactive "send us your bill" ══════════ */
.calc { margin: 1.5rem 0 0; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r); padding: clamp(1.4rem,3vw,2rem); box-shadow: 0 8px 30px rgb(var(--shadow)/0.07); }
.calc-head h3 { font-size: 1.32rem; margin: 0.2rem 0 0; color: rgb(var(--ink)); }
.calc-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,3vw,2rem); align-items: stretch; margin-top: 1.3rem; }
.calc-inputs { display: grid; gap: 1rem; align-content: start; }
.calc-field { display: grid; gap: 0.35rem; }
.calc-field span { font-size: 0.88rem; color: rgb(var(--ink-60)); }
.calc-field input { font-family: "Chivo Mono", monospace; font-size: 1.15rem; padding: 0.7rem 0.8rem; border: 1px solid rgb(var(--line)); border-radius: 10px; background: rgb(var(--bg)); color: rgb(var(--ink)); width: 100%; }
.calc-field input:focus { outline: 2px solid rgb(var(--brand)/0.5); border-color: rgb(var(--brand)); }
.calc-result { background: rgb(var(--brand)/0.06); border: 1px solid rgb(var(--brand)/0.25); border-radius: var(--r); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.calc-label { font-size: 0.85rem; color: rgb(var(--ink-60)); }
.calc-big { font-family: "Chivo Mono", monospace; font-size: clamp(2.2rem,6vw,3rem); font-weight: 700; color: rgb(var(--brand-dk)); line-height: 1.04; font-variant-numeric: tabular-nums; margin: 0.15rem 0; }
.calc-month { font-size: 0.9rem; color: rgb(var(--ink-60)); }
.calc-month-v { font-family: "Chivo Mono", monospace; color: rgb(var(--ink)); font-weight: 700; }
.calc-note { font-size: 0.8rem; color: rgb(var(--ink-40)); margin: 0.85rem 0 1rem; line-height: 1.5; }
.calc-save { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.calc-save input[type=email] { flex: 1 1 180px; font-family: inherit; font-size: 0.95rem; padding: 0.7rem 0.8rem; border: 1px solid rgb(var(--line)); border-radius: 10px; background: rgb(var(--surface)); color: rgb(var(--ink)); }
.calc-save input[type=email]:focus { outline: 2px solid rgb(var(--brand)/0.5); border-color: rgb(var(--brand)); }
.calc-status { font-size: 0.85rem; color: rgb(var(--ink-60)); margin: 0.5rem 0 0; min-height: 1.1em; }
.calc-status.error { color: #c0392b; }
@media (max-width: 640px) { .calc-body { grid-template-columns: 1fr; } }