/* ═══════════════════════════════════════════════════
   BexoPOS — Shared Stylesheet
   Nav · Cursor · Layout · Page Sections
   bexopos-shared.css
══════════════════════════════════════════════════ */

/* ── RESET & ROOT ─────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg: #07070a;
  --s1: #0d0d11;
  --s2: #141418;
  --s3: #1c1c22;
  --text: #eeeade;
  --muted: #a09080;
  --dim: #3d3830;
  --accent: #E8530A;
  --warm: #c4a35a;
  --border: rgba(238, 234, 222, .07);
  --nav-h: 68px;
  --Fd: 'Cormorant Garamond', Georgia, serif;
  --Fb: 'Outfit', sans-serif
}

[data-theme="light"] {
  --bg: #f4f1ea;
  --s1: #ebe7dd;
  --s2: #e0dcd1;
  --s3: #d4d0c4;
  --text: #1a1713;
  --muted: #5c5246;
  --dim: #b8b2a6;
  --border: rgba(26, 23, 19, .1)
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--Fb);
  font-weight: 300;
  overflow-x: hidden;
  min-height: 200vh
}

body.menu-open {
  overflow: hidden
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9997
}

[data-theme="light"] body::after {
  opacity: .12
}

/* ── CURSOR (desktop only) ────────────────────────── */
#cur,
#cur-ring {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%
}

#cur {
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s
}

#cur-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(232, 83, 10, .45);
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s
}

body.hl #cur-ring {
  width: 56px;
  height: 56px;
  border-color: rgba(232, 83, 10, .7)
}

body.hl #cur {
  width: 4px;
  height: 4px
}

@media(hover:none) {

  #cur,
  #cur-ring {
    display: none
  }
}

/* ═══════════════════════════════════════════════════
   NAV SHELL
══════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: background .5s, border-color .5s, box-shadow .5s;
  border-bottom: 1px solid transparent;
}

nav.stuck {
  background: rgba(7, 7, 10, .95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}

[data-theme="light"] nav:not(.stuck) {
  background: rgba(244, 241, 234, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] nav.stuck {
  background: rgba(244, 241, 234, .96) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 3.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Logo */
.nl {
  text-decoration: none;
  flex-shrink: 0;
  z-index: 10;
  display: flex;
  align-items: center
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0
}

/* ── DESKTOP LINKS ────────────────────────────────── */
.nlinks {
  display: flex;
  gap: 0;
  list-style: none;
  align-items: center
}

.nlinks>li {
  position: relative
}

.nlinks>li>a,
.mega-trigger {
  color: var(--text);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .2s, color .2s;
  padding: .55rem .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: none;
  background: none;
  border: none;
  font-family: var(--Fb);
  font-weight: 300;
  height: var(--nav-h);
  white-space: nowrap;
}

.nlinks>li>a:hover,
.mega-trigger:hover {
  opacity: 1
}

.nlinks>li.mega-open>.mega-trigger {
  opacity: 1;
  color: var(--accent)
}

.mega-chevron {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s;
  flex-shrink: 0;
}

.mega-open .mega-chevron {
  transform: rotate(180deg)
}

/* Right controls */
.nav-right {
  display: flex;
  align-items: center;
  gap: .5rem
}

.thmbtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, background .25s;
  flex-shrink: 0;
  position: relative;
}

.thmbtn:hover {
  border-color: var(--accent);
  background: rgba(232, 83, 10, .06)
}

.thmbtn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  transition: opacity .25s, transform .3s
}

.thmbtn .ico-sun {
  opacity: 0;
  transform: rotate(60deg) scale(.7)
}

.thmbtn .ico-moon {
  opacity: 1
}

[data-theme="light"] .thmbtn .ico-sun {
  opacity: 1;
  transform: rotate(0) scale(1)
}

[data-theme="light"] .thmbtn .ico-moon {
  opacity: 0;
  transform: rotate(-60deg) scale(.7)
}

.langwrap {
  position: relative
}

.langbtn {
  height: 32px;
  padding: 0 .7rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: border-color .25s, background .25s;
}

.langbtn:hover {
  border-color: var(--accent);
  background: rgba(232, 83, 10, .06)
}

.langbtn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.langbtn:hover svg,
.langbtn:hover .langcode {
  stroke: var(--accent);
  color: var(--accent)
}

.langcode {
  font-family: var(--Fb);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  transition: color .25s
}

.langdrop {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .4rem;
  min-width: 148px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .22s, transform .22s;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  z-index: 300;
}

.langwrap.open .langdrop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}

.lopt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .5rem .75rem;
  background: transparent;
  border: none;
  cursor: none;
  font-family: var(--Fb);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
  border-radius: 2px;
  transition: background .15s, color .15s;
  text-align: left;
}

.lopt:hover {
  background: rgba(232, 83, 10, .07);
  color: var(--text)
}

.lopt.active {
  color: var(--accent)
}

.lopt .lchk {
  width: 14px;
  height: 14px;
  opacity: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.lopt.active .lchk {
  opacity: 1
}

.nbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .5rem 1.5rem;
  font-family: var(--Fb);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: none;
  text-decoration: none;
  border-radius: 1px;
  transition: border-color .25s, color .25s;
  white-space: nowrap;
}

.nbtn:hover {
  border-color: var(--accent);
  color: var(--accent)
}

/* ── HAMBURGER ─────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  flex-shrink: 0;
  padding: 0;
  z-index: 1100;
}

.hamburger:hover {
  border-color: var(--accent);
  background: rgba(232, 83, 10, .06)
}

.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s, width .3s;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  width: 0
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg)
}

/* ═══════════════════════════════════════════════════
   MEGA PANEL — DESKTOP
══════════════════════════════════════════════════ */
.mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 10, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  z-index: 998;
}

[data-theme="light"] .mega-backdrop {
  background: rgba(244, 241, 234, .65)
}

.mega-backdrop.visible {
  opacity: 1;
  pointer-events: auto
}

.mega-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
}

.mega-box {
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .32s ease;
  pointer-events: none;
  overflow: hidden;
}

[data-theme="light"] .mega-box {
  background: var(--s1)
}

.mega-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 83, 10, .3) 35%, rgba(196, 163, 90, .3) 65%, transparent);
}

.mega-panel.open {
  visibility: visible
}

.mega-panel.open .mega-box {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto
}

/* Mega content */
.mega-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 3.5rem 0
}

/* Top row */
.mega-top {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  margin-bottom: 2.2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--border);
}

.mega-intro-eyebrow {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem
}

.mega-intro-title {
  font-family: var(--Fd);
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: .5rem
}

.mega-intro-title em {
  font-style: italic;
  color: var(--muted)
}

.mega-intro-desc {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1rem
}

.mega-intro-link {
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: none;
  transition: gap .2s
}

.mega-intro-link:hover {
  gap: .65rem
}

.mega-intro-link svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mega-stats {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  flex-wrap: wrap
}

.mega-stat-num {
  font-family: var(--Fd);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em
}

.mega-stat-num .ac {
  color: var(--accent)
}

.mega-stat-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .2rem
}

.mega-stat-div {
  width: 1px;
  height: 36px;
  background: var(--border);
  margin-bottom: .15rem
}

/* Category grid */
.mega-cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0
}

.mega-cat {
  border-right: 1px solid var(--border);
  padding-bottom: 1.8rem
}

.mega-cat:last-child {
  border-right: none
}

.mega-cat-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.1rem .65rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}

.mega-cat-icon {
  font-size: .9rem
}

.mega-cat-name {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warm)
}

.mega-cat-count {
  font-size: .55rem;
  color: var(--dim);
  margin-left: auto;
  border: 1px solid var(--border);
  padding: .08rem .4rem;
  border-radius: 100px
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem 1rem .5rem 1.1rem;
  cursor: none;
  text-decoration: none;
  transition: background .15s;
  position: relative;
}

.mega-item:hover {
  background: rgba(232, 83, 10, .045)
}

[data-theme="light"] .mega-item:hover {
  background: rgba(232, 83, 10, .07)
}

.mi-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .42rem
}

.mi-dot.live {
  background: var(--accent);
  box-shadow: 0 0 5px rgba(232, 83, 10, .45)
}

.mi-dot.ext {
  background: var(--dim);
  border: 1px solid rgba(238, 234, 222, .1)
}

.mi-body {
  flex: 1;
  min-width: 0
}

.mi-name {
  font-size: .76rem;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s
}

.mega-item:hover .mi-name {
  color: var(--accent)
}

.mi-desc {
  font-size: .6rem;
  color: var(--muted);
  line-height: 1.45;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.mi-arr {
  font-size: .6rem;
  color: var(--dim);
  flex-shrink: 0;
  margin-top: .3rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s
}

.mega-item:hover .mi-arr {
  opacity: 1;
  transform: translateX(0)
}

/* Footer strip */
.mega-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3.5rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, .18);
}

[data-theme="light"] .mega-footer {
  background: rgba(0, 0, 0, .04)
}

.mega-footer-left {
  display: flex;
  align-items: center;
  gap: 1.8rem
}

.mega-footer-tag {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem
}

.mega-footer-tag::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--border)
}

.mf-link {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: none;
  transition: gap .2s
}

.mf-link:hover {
  gap: .65rem
}

.mf-link svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mf-cta {
  background: var(--accent);
  color: var(--bg);
  padding: .5rem 1.4rem;
  font-family: var(--Fb);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: none;
  text-decoration: none;
  border-radius: 1px;
  transition: opacity .2s;
  white-space: nowrap
}

.mf-cta:hover {
  opacity: .85
}

/* ═══════════════════════════════════════════════════
   MOBILE MENU OVERLAY
══════════════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 1099;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.mobile-menu.open {
  transform: translateX(0)
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  flex-shrink: 0;
}

[data-theme="light"] .mobile-menu-header {
  background: var(--bg)
}

.mm-logo {
  text-decoration: none;
  display: flex;
  align-items: center
}

.mm-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}

.mm-close:hover {
  border-color: var(--accent);
  background: rgba(232, 83, 10, .06)
}

.mm-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mobile-menu-body {
  flex: 1;
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0
}

/* Main nav links in mobile */
.mm-main-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem
}

.mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color .2s;
}

.mm-link:last-child {
  border-bottom: none
}

.mm-link:hover {
  color: var(--accent)
}

.mm-link svg {
  width: 12px;
  height: 12px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5
}

/* Mobile areas de negócio — accordion */
.mm-areas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}

.mm-areas-header.active {
  color: var(--accent)
}

.mm-areas-header:hover {
  color: var(--accent)
}

.mm-areas-chevron {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}

.mm-areas-header.active .mm-areas-chevron {
  border-color: var(--accent);
  background: rgba(232, 83, 10, .1)
}

.mm-areas-chevron svg {
  width: 8px;
  height: 8px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s, stroke .2s
}

.mm-areas-header.active .mm-areas-chevron svg {
  transform: rotate(180deg);
  stroke: var(--accent)
}

.mm-areas-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(.16, 1, .3, 1);
}

.mm-areas-body.open {
  max-height: 2000px
}

/* Mobile categories */
.mm-cat {
  margin: .8rem 0
}

.mm-cat-title {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--warm);
  padding: .6rem 0 .4rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .2rem;
}

.mm-cat-title span {
  font-size: .75rem
}

.mm-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0
}

.mm-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .4rem .6rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}

.mm-item:nth-child(odd) {
  padding-right: .8rem;
  border-right: 1px solid var(--border)
}

.mm-item:nth-child(even) {
  padding-left: .8rem
}

.mm-item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0
}

.mm-item-dot.live {
  background: var(--accent)
}

.mm-item-dot.ext {
  background: var(--dim)
}

.mm-item-name {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.3;
  transition: color .15s
}

.mm-item:hover .mm-item-name {
  color: var(--accent)
}

/* last row no bottom border */
.mm-cat-grid>.mm-item:nth-last-child(-n+2) {
  border-bottom: none
}

/* Mobile bottom */
.mm-footer {
  margin-top: auto;
  padding: 1.5rem 0 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.mm-cta-primary {
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--bg);
  padding: .9rem;
  font-family: var(--Fb);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 1px;
  text-decoration: none;
  transition: opacity .2s;
}

.mm-cta-primary:hover {
  opacity: .88
}

.mm-cta-secondary {
  display: block;
  text-align: center;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .75rem;
  font-family: var(--Fb);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 1px;
  text-decoration: none;
  transition: border-color .25s, color .25s;
}

.mm-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent)
}

/* Mobile lang + theme row */
.mm-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: .8rem 0
}

.mm-thm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
  cursor: pointer;
  position: relative
}

.mm-thm:hover {
  border-color: var(--accent)
}

.mm-thm svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  transition: opacity .25s, transform .3s
}

.mm-thm .ico-sun {
  opacity: 0;
  transform: rotate(60deg) scale(.7)
}

.mm-thm .ico-moon {
  opacity: 1
}

[data-theme="light"] .mm-thm .ico-sun {
  opacity: 1;
  transform: rotate(0) scale(1)
}

[data-theme="light"] .mm-thm .ico-moon {
  opacity: 0;
  transform: rotate(-60deg) scale(.7)
}

.mm-lang-row {
  display: flex;
  gap: .4rem
}

.mm-lang-btn {
  padding: .3rem .7rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--Fb);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, color .2s
}

.mm-lang-btn.active {
  border-color: var(--accent);
  color: var(--accent)
}

.mm-lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent)
}

/* ── RESPONSIVE BREAKPOINTS ─────────────────────────── */
@media(max-width:1024px) {
  .mega-stats {
    gap: 1rem
  }

  .mega-stat-num {
    font-size: 1.8rem
  }

  .mega-top {
    grid-template-columns: 200px 1fr;
    gap: 2rem
  }
}

@media(max-width:900px) {
  .nav-inner {
    padding: 0 1.5rem
  }

  .nlinks,
  .langwrap,
  .nbtn {
    display: none
  }

  .hamburger {
    display: flex
  }

  .mega-panel,
  .mega-backdrop {
    display: none !important
  }
}

/* ── SHARED PAGE HELPERS ────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none
}

.stag {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem
}

.stag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent)
}

.rv {
  opacity: 0;
  transform: translateY(26px)
}

.rvl {
  opacity: 0;
  transform: translateX(-36px)
}

.rvr {
  opacity: 0;
  transform: translateX(36px)
}

.bp {
  background: var(--text);
  color: var(--bg);
  padding: .9rem 2.6rem;
  border: none;
  font-family: var(--Fb);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: none;
  text-decoration: none;
  border-radius: 1px;
  display: inline-block;
  transition: opacity .2s
}

.bp:hover {
  opacity: .8
}

.bg {
  color: var(--muted);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: color .2s
}

.bg .ar {
  transition: transform .25s;
  display: inline-block
}

.bg:hover {
  color: var(--text)
}

.bg:hover .ar {
  transform: translateX(6px)
}

.breadcrumb {
  position: relative;
  z-index: 5;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 3.5rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap
}

.bc-item {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  cursor: none
}

.bc-item:hover {
  color: var(--text)
}

.bc-sep {
  font-size: .55rem;
  color: var(--dim)
}

.bc-current {
  color: var(--accent)
}

/* HERO */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden
}

.hero-orb1 {
  width: 55vw;
  height: 55vw;
  top: -12vh;
  right: -8vw;
  background: radial-gradient(circle, rgba(232, 83, 10, .05) 0%, transparent 70%)
}

.hero-orb2 {
  width: 38vw;
  height: 38vw;
  bottom: -5vh;
  left: -3vw;
  background: radial-gradient(circle, rgba(196, 163, 90, .05) 0%, transparent 70%)
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 80% at 20% 50%, black 10%, transparent 75%);
  pointer-events: none
}

[data-theme="light"] .hero-grid {
  background-image: linear-gradient(rgba(26, 23, 19, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 23, 19, .07) 1px, transparent 1px)
}

.hero-left {
  position: relative;
  z-index: 5;
  padding: 2rem 3.5rem 5rem
}

.hero-eyebrow {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 1rem
}

.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent)
}

.hero-h1 {
  font-family: var(--Fd);
  font-size: clamp(3.2rem, 5.5vw, 5.5rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.025em;
  margin-bottom: 2.5rem
}

.hero-h1 .word {
  display: inline-block;
  overflow: hidden;
  margin-right: .12em
}

.hero-h1 .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0
}

.hero-h1 .ita {
  font-style: italic;
  color: var(--muted)
}

.hero-sub {
  max-width: 44ch;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.85;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(18px)
}

.hero-actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  opacity: 0;
  transform: translateY(16px)
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(16px)
}

.hstat {
  padding-right: 1.5rem;
  border-right: 1px solid var(--border)
}

.hstat:last-child {
  border-right: none;
  padding-right: 0
}

.hstat-num {
  font-family: var(--Fd);
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1
}

.hstat-num .ac {
  color: var(--accent)
}

.hstat-label {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .4rem
}

.hero-right {
  position: relative;
  height: 100%;
  min-height: 92vh
}

.hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(.6) saturate(.8)
}

[data-theme="light"] .hero-photo img {
  filter: brightness(.78) saturate(.85)
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 35%), linear-gradient(to top, rgba(7, 7, 10, .5) 0%, transparent 50%)
}

[data-theme="light"] .hero-photo-overlay {
  background: linear-gradient(to right, var(--bg) 0%, transparent 35%), linear-gradient(to top, rgba(244, 241, 234, .4) 0%, transparent 50%)
}

/* TAB HUD */
.tab-hud {
  position: absolute;
  bottom: 3rem;
  right: 2.5rem;
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 235px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(232, 83, 10, .06);
  opacity: 0
}

[data-theme="light"] .tab-hud {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .1)
}

.thud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border)
}

.thud-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.thud-badge {
  font-size: .6rem;
  color: var(--accent);
  border: 1px solid rgba(232, 83, 10, .3);
  padding: .15rem .55rem;
  border-radius: 100px
}

.thud-tabs {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .8rem
}

.thud-tab {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .65rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px
}

.thud-tab.open {
  border-color: rgba(232, 83, 10, .25);
  background: rgba(232, 83, 10, .05)
}

.thud-tab.closing {
  border-color: rgba(196, 163, 90, .25);
  background: rgba(196, 163, 90, .05)
}

.thud-tab-num {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  min-width: 24px;
  color: var(--text)
}

.thud-tab-info {
  flex: 1
}

.thud-tab-items {
  font-size: .65rem;
  color: var(--muted)
}

.thud-tab-val {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300
}

.thud-tab.open .thud-tab-val {
  color: var(--accent)
}

.thud-tab.closing .thud-tab-val {
  color: var(--warm)
}

.thud-total {
  display: flex;
  justify-content: space-between;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
  font-size: .68rem;
  color: var(--muted)
}

.thud-total-val {
  color: var(--accent);
  font-family: var(--Fd);
  font-size: 1rem
}

/* MARQUEE */


/* ── SHARED PAGE SECTIONS ───────────────────────── */
.mq {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.3rem 0;
  overflow: hidden;
  background: var(--s1)
}

[data-theme="light"] .mq {
  background: var(--s1)
}

.mqt {
  display: flex;
  width: max-content;
  animation: mrq 30s linear infinite
}

.mqi {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  padding: 0 2rem;
  white-space: nowrap
}

[data-theme="light"] .mqi {
  color: #000
}

.mqs {
  color: var(--accent);
  font-size: .5rem;
  display: flex;
  align-items: center;
  padding-right: .4rem
}

.mq:hover .mqt {
  animation-play-state: paused
}

@keyframes mrq {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

/* SPEED BAND */
.speed-band {
  background: var(--s1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4rem 0
}

.speed-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.spd-block {
  padding: 0 2.5rem;
  border-right: 1px solid var(--border)
}

.spd-block:first-child {
  padding-left: 0
}

.spd-block:last-child {
  border-right: none
}

.spd-num {
  font-family: var(--Fd);
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text)
}

.spd-num .ac {
  color: var(--accent)
}

.spd-unit {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .6rem
}

.spd-desc {
  font-size: .8rem;
  color: var(--dim);
  margin-top: .3rem
}

/* STAT BAND */
.stat-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3rem 0
}

.stat-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sb {
  text-align: center;
  padding: 1.5rem;
  border-right: 1px solid var(--border)
}

.sb:last-child {
  border-right: none
}

.sb-num {
  font-family: var(--Fd);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em
}

.sb-num .ac {
  color: var(--accent)
}

.sb-label {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem
}

/* CHALLENGES */
.challenges {
  padding: 9rem 0
}

.challenges-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: start
}

.challenges-left h2 {
  font-family: var(--Fd);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 2rem
}

.challenges-left h2 em {
  font-style: italic;
  color: var(--muted)
}

.challenges-left p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.9
}

.challenge-list {
  display: flex;
  flex-direction: column
}

.challenge-item {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1.2rem
}

.challenge-item:last-child {
  border-bottom: 1px solid var(--border)
}

.ch-num {
  font-family: var(--Fd);
  font-size: .8rem;
  color: var(--accent);
  padding-top: .1rem
}

.ch-body h3 {
  font-family: var(--Fd);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: .4rem
}

.ch-body p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.75
}

/* PHOTO BAND */
.photo-band {
  position: relative;
  height: 65vh;
  overflow: hidden
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: brightness(.5) saturate(.8)
}

[data-theme="light"] .photo-band img {
  filter: brightness(.68) saturate(.85)
}

.photo-band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 80%, var(--bg) 100%)
}

.pbq {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  padding: 0 3.5rem;
  max-width: 900px
}

.pbq-text {
  font-family: var(--Fd);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 1rem
}

.pbq-cite {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted)
}

/* FEATURES */
.features-sec {
  padding: 9rem 0
}

.feat-block {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: center;
  margin-bottom: 8rem
}

.feat-block:last-child {
  margin-bottom: 0
}

.feat-block.flip {
  direction: rtl
}

.feat-block.flip>* {
  direction: ltr
}

.feat-title {
  font-family: var(--Fd);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1.6rem
}

.feat-title em {
  font-style: italic;
  color: var(--muted)
}

.feat-desc {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.9;
  margin-bottom: 2.2rem
}

.feat-pts {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2.5rem
}

.feat-pt {
  display: grid;
  grid-template-columns: 14px 10rem 1fr;
  column-gap: .9rem;
  align-items: start;
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.55
}

.feat-pt::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: .6rem
}

.feat-pt strong {
  color: var(--text);
  font-weight: 400
}

.feat-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center
}

.mwrap {
  position: relative;
  transform-style: preserve-3d
}

.deco-chip {
  position: absolute;
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 100px;
  padding: .4rem .95rem;
  font-size: .64rem;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted)
}

[data-theme="light"] .deco-chip {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08)
}

.ddot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent)
}

.ddot.w {
  background: var(--warm);
  box-shadow: 0 0 6px var(--warm)
}

.dc1 {
  top: -1.5rem;
  right: -2.5rem;
  animation: floA 4s ease-in-out infinite
}

.dc2 {
  bottom: 2rem;
  right: -3rem;
  animation: floB 5s ease-in-out 1s infinite
}

.dc3 {
  bottom: -1rem;
  left: -2.5rem;
  animation: floA 4.5s ease-in-out .5s infinite
}

@keyframes floA {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-9px)
  }
}

@keyframes floB {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(7px)
  }
}

/* TAB MOCKUP */
.mock-tab {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.4rem;
  width: 330px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-tab {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border)
}

.mt-title {
  font-family: var(--Fd);
  font-size: 1.2rem;
  font-weight: 400
}

.mt-badge {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(232, 83, 10, .3);
  padding: .18rem .6rem;
  border-radius: 100px
}

.mt-items {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem
}

.mt-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem .6rem;
  background: var(--s2);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: .73rem
}

.mt-item-emoji {
  font-size: .9rem;
  flex-shrink: 0
}

.mt-item-name {
  flex: 1;
  color: var(--muted)
}

.mt-item-qty {
  font-family: var(--Fd);
  font-size: .85rem;
  color: var(--text)
}

.mt-item-price {
  color: var(--text)
}

.mt-add {
  display: flex;
  gap: .4rem;
  margin-bottom: .9rem;
  flex-wrap: wrap
}

.mt-add-btn {
  padding: .3rem .75rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .65rem;
  color: var(--muted);
  cursor: default;
  transition: all .2s
}

.mt-add-btn.sel {
  border-color: rgba(232, 83, 10, .35);
  color: var(--accent);
  background: rgba(232, 83, 10, .08)
}

.mt-divider {
  height: 1px;
  background: var(--border);
  margin: .5rem 0
}

.mt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.mt-total-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mt-total-val {
  font-family: var(--Fd);
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent)
}

/* BEER STOCK MOCKUP */
.mock-beerstock {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.4rem;
  width: 320px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(196, 163, 90, .07)
}

[data-theme="light"] .mock-beerstock {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mbs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border)
}

.mbs-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mbs-updated {
  font-size: .6rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .35rem
}

.mbs-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: lpulse 1.8s ease-in-out infinite
}

@keyframes lpulse {

  0%,
  100% {
    opacity: .5
  }

  50% {
    opacity: 1
  }
}

.mbs-tap-label {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem
}

.mbs-taps {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .8rem
}

.mbs-tap {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .65rem;
  background: var(--s2);
  border-radius: 6px;
  border: 1px solid var(--border)
}

.mbs-tap-icon {
  font-size: .9rem;
  flex-shrink: 0
}

.mbs-tap-name {
  flex: 1;
  font-size: .75rem;
  color: var(--text)
}

.mbs-tap-bar-wrap {
  width: 70px;
  height: 8px;
  background: var(--s3);
  border-radius: 4px;
  overflow: hidden
}

.mbs-tap-bar {
  height: 100%;
  border-radius: 4px
}

.mbs-tap-bar.full {
  background: var(--accent)
}

.mbs-tap-bar.mid {
  background: var(--warm)
}

.mbs-tap-bar.low {
  background: #e04040
}

.mbs-tap-level {
  font-size: .62rem;
  min-width: 26px;
  text-align: right
}

.mbs-tap-level.full {
  color: var(--accent)
}

.mbs-tap-level.mid {
  color: var(--warm)
}

.mbs-tap-level.low {
  color: #e04040
}

.mbs-bottles-label {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem
}

.mbs-bottles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin-bottom: .7rem
}

.mbs-bottle {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .5rem .4rem;
  text-align: center;
  font-size: .58rem;
  color: var(--muted)
}

.mbs-bottle-emoji {
  font-size: .85rem;
  display: block;
  margin-bottom: .2rem
}

.mbs-bottle-name {
  line-height: 1.25;
  margin-bottom: .2rem
}

.mbs-bottle-qty {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  color: var(--text)
}

.mbs-alert {
  background: rgba(196, 163, 90, .08);
  border: 1px solid rgba(196, 163, 90, .2);
  border-radius: 6px;
  padding: .6rem .8rem;
  font-size: .72rem;
  color: var(--warm);
  display: flex;
  align-items: center;
  gap: .6rem
}

/* HAPPY HOUR MOCKUP */
.mock-happy {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.4rem;
  width: 310px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5)
}

[data-theme="light"] .mock-happy {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mhh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border)
}

.mhh-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mhh-badge {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warm);
  border: 1px solid rgba(196, 163, 90, .3);
  padding: .18rem .6rem;
  border-radius: 100px;
  animation: glowW 2s ease-in-out infinite
}

@keyframes glowW {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(196, 163, 90, 0)
  }

  50% {
    box-shadow: 0 0 8px rgba(196, 163, 90, .3)
  }
}

.mhh-timer {
  background: rgba(196, 163, 90, .08);
  border: 1px solid rgba(196, 163, 90, .2);
  border-radius: 8px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .8rem
}

.mhh-timer-icon {
  font-size: 1.2rem;
  flex-shrink: 0
}

.mhh-timer-info {}

.mhh-timer-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: .2rem
}

.mhh-timer-val {
  font-family: var(--Fd);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--warm);
  letter-spacing: -.02em
}

.mhh-items {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .8rem
}

.mhh-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  background: var(--s2);
  border-radius: 6px;
  border: 1px solid var(--border)
}

.mhh-item-name {
  flex: 1;
  font-size: .75rem;
  color: var(--text)
}

.mhh-item-orig {
  font-size: .65rem;
  color: var(--dim);
  text-decoration: line-through;
  margin-right: .3rem
}

.mhh-item-price {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300;
  color: var(--warm)
}

.mhh-next {
  background: var(--s2);
  border-radius: 6px;
  padding: .6rem .8rem;
  font-size: .7rem;
  color: var(--muted);
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between
}

.mhh-next strong {
  color: var(--text);
  font-weight: 400
}

/* TABLE MAP MOCKUP (restaurantes-servico-completo) */
.mock-tablemap {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.4rem;
  width: 340px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-tablemap {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mm-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mm-time {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  color: var(--accent)
}

.mm-floor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  margin-bottom: .9rem
}

.mm-t {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.2;
  cursor: default;
  transition: all .3s
}

.mm-t .tn {
  font-size: .46rem;
  letter-spacing: .05em;
  opacity: .55
}

.mm-t.occ {
  background: rgba(232, 83, 10, .12);
  border-color: rgba(232, 83, 10, .3);
  color: var(--accent)
}

.mm-t.wait {
  background: rgba(196, 163, 90, .12);
  border-color: rgba(196, 163, 90, .3);
  color: var(--warm)
}

.mm-t.bill {
  background: rgba(224, 64, 64, .1);
  border-color: rgba(224, 64, 64, .25);
  color: #e04040
}

.mm-t.free {
  background: var(--s2)
}

.mm-t.bar {
  grid-column: span 2;
  aspect-ratio: auto;
  padding: .4rem;
  background: var(--s2);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--dim)
}

.mm-legend {
  display: flex;
  gap: .7rem;
  margin-bottom: .9rem;
  flex-wrap: wrap
}

.ml-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .56rem;
  color: var(--muted)
}

.ml-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0
}

.mm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  padding-top: .8rem
}

.mm-stat {
  text-align: center;
  padding: 0 .5rem;
  border-right: 1px solid var(--border)
}

.mm-stat:last-child {
  border-right: none
}

.mm-stat-label {
  font-size: .53rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .25rem
}

.mm-stat-val {
  font-family: var(--Fd);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text)
}

/* KDS MOCKUP (restaurantes-servico-completo) */
.mock-kds {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.4rem;
  width: 320px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(224, 64, 64, .05)
}

[data-theme="light"] .mock-kds {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.kds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.kds-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.kds-badge {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e04040;
  border: 1px solid rgba(224, 64, 64, .3);
  padding: .18rem .6rem;
  border-radius: 100px
}

.kds-ticket {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .6rem
}

.kds-ticket:last-child {
  margin-bottom: 0
}

.kds-ticket.done {
  opacity: .5
}

.kds-ticket-bar {
  height: 3px;
  width: 100%
}

.kds-ticket-bar.urgent {
  background: #e04040
}

.kds-ticket-bar.normal {
  background: var(--accent)
}

.kds-ticket-bar.done {
  background: var(--dim)
}

.kds-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .8rem .35rem;
  border-bottom: 1px solid var(--border)
}

.kds-ticket-table {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300
}

.kds-ticket-time {
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--muted)
}

.kds-ticket-time.urgent {
  color: #e04040;
  font-weight: 500
}

.kds-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .8rem;
  border-bottom: 1px solid var(--border)
}

.kds-item:last-child {
  border-bottom: none
}

.kds-item-qty {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(232, 83, 10, .15);
  color: var(--accent);
  font-size: .6rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.kds-item-qty.w {
  background: rgba(196, 163, 90, .15);
  color: var(--warm)
}

.kds-item-name {
  flex: 1;
  font-size: .75rem;
  color: var(--text)
}

.kds-item-note {
  font-size: .6rem;
  color: var(--warm);
  font-style: italic
}

.kds-done {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0
}

/* BILL MOCKUP (restaurantes-servico-completo) */
.mock-bill {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.4rem;
  width: 320px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-bill {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.bill-header {
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.bill-table-name {
  font-family: var(--Fd);
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: .2rem
}

.bill-cover {
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--muted)
}

.bill-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: .7rem
}

.bill-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .3rem 0;
  font-size: .73rem;
  border-bottom: 1px solid var(--border)
}

.bill-item:last-child {
  border-bottom: none
}

.bill-item-name {
  flex: 1;
  color: var(--muted)
}

.bill-item-price {
  font-family: var(--Fd);
  font-size: .85rem;
  font-weight: 300;
  color: var(--text)
}

.bill-item-price.sel {
  color: var(--accent)
}

.bill-divider {
  height: 1px;
  background: var(--border);
  margin: .6rem 0
}

.bill-split-label {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .5rem
}

.bill-persons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3rem;
  margin-bottom: .8rem
}

.bill-person {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .3rem;
  text-align: center
}

.bill-person.active {
  border-color: rgba(232, 83, 10, .35);
  background: rgba(232, 83, 10, .08)
}

.bill-person-name {
  font-size: .6rem;
  color: var(--muted);
  margin-bottom: .15rem
}

.bill-person-amt {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  color: var(--text)
}

.bill-person.active .bill-person-amt {
  color: var(--accent)
}

.bill-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: .6rem;
  border-top: 1px solid var(--border)
}

.bill-total-label {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.bill-total-val {
  font-family: var(--Fd);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--accent)
}

/* PHOTO SEC 2 */
.photo-sec2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 60vh;
  overflow: hidden
}

.ps2-img {
  overflow: hidden;
  position: relative
}

.ps2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s ease-out;
  filter: brightness(.55)
}

[data-theme="light"] .ps2-img img {
  filter: brightness(.68)
}

.ps2-img:hover img {
  transform: scale(1.04)
}

.ps2-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 2.5rem
}

.ps2-img:first-child .ps2-overlay {
  padding-left: max(2.5rem, calc((100vw - 1400px) / 2 + 2.5rem))
}

.ps2-label {
  font-family: var(--Fd);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text);
  font-style: italic
}

/* QUICK ORDER MOCKUP (restaurantes-servico-rapido) */
.mock-qorder {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 320px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-qorder {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.qo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem
}

.qo-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.qo-num-badge {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--accent)
}

.qo-cats {
  display: flex;
  gap: .4rem;
  margin-bottom: .9rem;
  flex-wrap: wrap
}

.qo-cat {
  font-size: .6rem;
  padding: .25rem .7rem;
  border-radius: 100px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: default
}

.qo-cat.active {
  background: rgba(232, 83, 10, .12);
  border-color: rgba(232, 83, 10, .35);
  color: var(--accent)
}

.qo-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: .9rem
}

.qo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .4rem;
  border-radius: 8px;
  background: var(--s2);
  border: 1px solid var(--border);
  text-align: center
}

.qo-item.selected {
  background: rgba(232, 83, 10, .08);
  border-color: rgba(232, 83, 10, .3)
}

.qo-item-emoji {
  font-size: 1.3rem;
  line-height: 1
}

.qo-item-name {
  font-size: .62rem;
  color: var(--text);
  line-height: 1.2
}

.qo-item-price {
  font-size: .62rem;
  color: var(--muted)
}

.qo-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: .7rem
}

.qo-order-row {
  display: flex;
  justify-content: space-between;
  font-size: .65rem;
  color: var(--muted);
  margin-bottom: .25rem
}

.qo-order-name {
  color: var(--text)
}

.qo-order-val {
  color: var(--text)
}

.qo-total-row {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border)
}

.qo-total-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted)
}

.qo-total-val {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text)
}

/* QUEUE BOARD MOCKUP (restaurantes-servico-rapido) */
.mock-queue {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-queue {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border)
}

.mq-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mq-count {
  font-size: .6rem;
  color: var(--accent)
}

.mq-calling {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(232, 83, 10, .08);
  border: 1px solid rgba(232, 83, 10, .25);
  border-radius: 8px;
  padding: .7rem;
  margin-bottom: .8rem
}

.mq-calling-num {
  font-family: var(--Fd);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--accent);
  min-width: 44px;
  text-align: center
}

.mq-calling-label {
  font-size: .58rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em
}

.mq-calling-name {
  font-size: .7rem;
  color: var(--text)
}

.mq-ready-label,
.mq-prep-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem
}

.mq-ready-nums {
  display: flex;
  gap: .4rem;
  margin-bottom: .8rem
}

.mq-rnum {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  padding: .3rem .7rem;
  border-radius: 6px;
  background: rgba(196, 163, 90, .08);
  border: 1px solid rgba(196, 163, 90, .2);
  color: var(--warm)
}

.mq-prep-list {
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.mq-prep-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: .5rem
}

.mq-prep-num {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  color: var(--text);
  grid-row: 1 / 3;
  align-self: center
}

.mq-prep-name {
  font-size: .65rem;
  color: var(--muted)
}

.mq-prep-bar {
  height: 3px;
  background: var(--s3);
  border-radius: 2px;
  margin-top: .2rem
}

.mq-prep-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .4s ease
}

/* PEAK ANALYTICS MOCKUP (restaurantes-servico-rapido) */
.mock-peak {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.3rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-peak {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.pk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.pk-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.pk-period {
  font-size: .6rem;
  color: var(--text)
}

.pk-big {
  margin-bottom: 1rem
}

.pk-big-val {
  font-family: var(--Fd);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--text)
}

.pk-big-sub {
  font-size: .6rem;
  color: var(--muted)
}

.pk-chart-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem
}

.pk-hours {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 60px;
  margin-bottom: .3rem
}

.pkb {
  flex: 1;
  background: var(--s3);
  border-radius: 2px 2px 0 0;
  transition: background .3s
}

.pkb.peak {
  background: var(--accent)
}

.pkb.now {
  background: rgba(196, 163, 90, .6)
}

.pk-hour-labels {
  display: flex;
  justify-content: space-between;
  font-size: .5rem;
  color: var(--dim);
  margin-bottom: .9rem
}

.pk-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--border)
}

.pk-kpi {
  padding: 0 .6rem;
  border-right: 1px solid var(--border)
}

.pk-kpi:first-child {
  padding-left: 0
}

.pk-kpi:last-child {
  border-right: none
}

.pk-kpi-label {
  font-size: .5rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.pk-kpi-val {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  color: var(--text)
}

/* CUSTOMIZER MOCKUP (restauracao-casual-rapida) */
.mock-customizer {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-customizer {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mc-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mc-step-label {
  font-size: .6rem;
  color: var(--accent)
}

.mc-bowl-name {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: .7rem
}

.mc-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin-bottom: .8rem
}

.mc-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .5rem .3rem;
  border-radius: 8px;
  background: var(--s2);
  border: 1px solid var(--border);
  cursor: default
}

.mc-opt.sel {
  background: rgba(232, 83, 10, .08);
  border-color: rgba(232, 83, 10, .3)
}

.mc-opt-emoji {
  font-size: 1.1rem;
  line-height: 1
}

.mc-opt-name {
  font-size: .58rem;
  color: var(--muted);
  text-align: center
}

.mc-selected-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem
}

.mc-selected-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .8rem
}

.mc-sel-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .65rem;
  color: var(--muted)
}

.mc-sel-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(232, 83, 10, .15);
  border: 1px solid rgba(232, 83, 10, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.mc-sel-check svg {
  width: 8px;
  height: 8px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none
}

.mc-sel-name {
  flex: 1;
  color: var(--text)
}

.mc-sel-extra {
  font-size: .6rem;
  color: var(--warm)
}

.mc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: .7rem;
  border-top: 1px solid var(--border)
}

.mc-total-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mc-total-val {
  font-family: var(--Fd);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent)
}

/* LOYALTY MOCKUP (restauracao-casual-rapida) */
.mock-loyalty {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 280px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(196, 163, 90, .06)
}

[data-theme="light"] .mock-loyalty {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.loy-header {
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.loy-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.loy-card {
  background: linear-gradient(135deg, rgba(196, 163, 90, .12), rgba(232, 83, 10, .08));
  border: 1px solid rgba(196, 163, 90, .2);
  border-radius: 8px;
  padding: .9rem;
  margin-bottom: .8rem;
  text-align: center
}

.loy-card-name {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: .2rem
}

.loy-card-since {
  font-size: .58rem;
  color: var(--muted);
  margin-bottom: .7rem
}

.loy-card-pts {
  font-family: var(--Fd);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--warm);
  line-height: 1
}

.loy-card-pts-label {
  font-size: .58rem;
  color: var(--muted)
}

.loy-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--muted);
  margin-bottom: .35rem
}

.loy-bar-wrap {
  height: 4px;
  background: var(--s3);
  border-radius: 2px;
  margin-bottom: .8rem;
  overflow: hidden
}

.loy-bar-fill {
  height: 100%;
  width: 72%;
  background: var(--warm);
  border-radius: 2px
}

.loy-rewards {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.loy-reward {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: .5rem;
  font-size: .65rem
}

.loy-reward-pts {
  font-family: var(--Fd);
  font-size: .8rem;
  font-weight: 300;
  color: var(--muted);
  text-align: center
}

.loy-reward-name {
  color: var(--text)
}

.loy-reward-status {
  font-size: .55rem;
  padding: .15rem .5rem;
  border-radius: 100px
}

.loy-reward-status.avail {
  background: rgba(232, 83, 10, .1);
  border: 1px solid rgba(232, 83, 10, .25);
  color: var(--accent)
}

.loy-reward-status.soon {
  background: rgba(122, 131, 148, .08);
  border: 1px solid rgba(122, 131, 148, .2);
  color: var(--muted)
}

/* DIGITAL MENU MOCKUP (restauracao-casual-rapida) */
.mock-menu {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 83, 10, .06)
}

[data-theme="light"] .mock-menu {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mm2-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mm2-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mm2-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .6rem;
  color: #6fcf97
}

.mm2-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fcf97;
  animation: bxPulse 1.8s ease-in-out infinite
}

@keyframes bxPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.mm2-cats {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .8rem
}

.mm2-cat {
  font-size: .6rem;
  padding: .22rem .65rem;
  border-radius: 100px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: default
}

.mm2-cat.active {
  background: rgba(232, 83, 10, .12);
  border-color: rgba(232, 83, 10, .35);
  color: var(--accent)
}

.mm2-items {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: .8rem
}

.mm2-item {
  display: grid;
  grid-template-columns: 28px 1fr auto 12px;
  align-items: center;
  gap: .5rem
}

.mm2-emoji {
  font-size: 1rem;
  text-align: center
}

.mm2-info {
  min-width: 0
}

.mm2-name {
  font-size: .68rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mm2-desc {
  font-size: .58rem;
  color: var(--muted)
}

.mm2-price {
  font-family: var(--Fd);
  font-size: .85rem;
  font-weight: 300;
  color: var(--text);
  white-space: nowrap
}

.mm2-avail {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.mm2-avail.ok {
  background: #6fcf97
}

.mm2-avail.low {
  background: #e04040
}

.mm2-footer {
  display: flex;
  justify-content: space-between;
  font-size: .58rem;
  color: var(--dim);
  padding-top: .6rem;
  border-top: 1px solid var(--border)
}

/* COFFEE ORDER MOCKUP (cafes-pastelarias) */
.mock-coffee-order {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(196, 163, 90, .06)
}

[data-theme="light"] .mock-coffee-order {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mco-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mco-num {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300;
  color: var(--accent)
}

.mco-cats {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .8rem
}

.mco-cat {
  font-size: .58rem;
  padding: .22rem .6rem;
  border-radius: 100px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: default
}

.mco-cat.active {
  background: rgba(196, 163, 90, .1);
  border-color: rgba(196, 163, 90, .3);
  color: var(--warm)
}

.mco-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin-bottom: .8rem
}

.mco-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .55rem .4rem;
  border-radius: 8px;
  background: var(--s2);
  border: 1px solid var(--border);
  text-align: center
}

.mco-product.sel {
  background: rgba(196, 163, 90, .08);
  border-color: rgba(196, 163, 90, .25)
}

.mco-product-emoji {
  font-size: 1.2rem;
  line-height: 1
}

.mco-product-name {
  font-size: .62rem;
  color: var(--text)
}

.mco-product-price {
  font-size: .58rem;
  color: var(--muted)
}

.mco-mods {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .8rem
}

.mco-mod {
  font-size: .58rem;
  padding: .2rem .55rem;
  border-radius: 100px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--muted)
}

.mco-mod.sel {
  background: rgba(232, 83, 10, .08);
  border-color: rgba(232, 83, 10, .25);
  color: var(--accent)
}

.mco-order {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mco-order-row {
  display: flex;
  justify-content: space-between;
  font-size: .65rem
}

.mco-order-name {
  color: var(--muted)
}

.mco-order-val {
  color: var(--text)
}

.mco-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.mco-total-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mco-total-val {
  font-family: var(--Fd);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--accent)
}

/* PASTRY STOCK MOCKUP (cafes-pastelarias) */
.mock-pastry {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(196, 163, 90, .06)
}

[data-theme="light"] .mock-pastry {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mp-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mp-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .6rem;
  color: #6fcf97
}

.mp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fcf97;
  animation: bxPulse 1.8s ease-in-out infinite
}

.mp-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem
}

.mp-items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .8rem
}

.mp-item {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  column-gap: .5rem
}

.mp-item-emoji {
  font-size: .95rem;
  text-align: center
}

.mp-item-info {
  min-width: 0
}

.mp-item-name {
  font-size: .65rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mp-item-made {
  font-size: .55rem;
  color: var(--dim)
}

.mp-item-bar-wrap {
  grid-column: 2;
  height: 3px;
  background: var(--s3);
  border-radius: 2px;
  grid-row: 2;
  overflow: hidden
}

.mp-item-bar {
  height: 100%;
  border-radius: 2px
}

.mp-item-bar.ok {
  background: #6fcf97
}

.mp-item-bar.warn {
  background: var(--warm)
}

.mp-item-bar.low {
  background: #e04040
}

.mp-item-qty {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300;
  grid-row: 1 / 3;
  grid-column: 4;
  text-align: right
}

.mp-item-qty.ok {
  color: #6fcf97
}

.mp-item-qty.warn {
  color: var(--warm)
}

.mp-item-qty.low {
  color: #e04040
}

.mp-alert {
  font-size: .62rem;
  color: var(--warm);
  background: rgba(196, 163, 90, .07);
  border: 1px solid rgba(196, 163, 90, .2);
  border-radius: 6px;
  padding: .5rem .7rem
}

/* STAMP CARD MOCKUP (cafes-pastelarias) */
.mock-stamp {
  background: var(--s1);
  border: 1px solid rgba(238, 234, 222, .1);
  border-radius: 12px;
  padding: 1.2rem;
  width: 300px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(196, 163, 90, .06)
}

[data-theme="light"] .mock-stamp {
  background: var(--s1);
  border-color: rgba(26, 23, 19, .15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .1)
}

.mst-header {
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mst-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mst-card {
  background: linear-gradient(135deg, rgba(196, 163, 90, .12), rgba(232, 83, 10, .06));
  border: 1px solid rgba(196, 163, 90, .2);
  border-radius: 8px;
  padding: .9rem;
  margin-bottom: .8rem
}

.mst-card-name {
  font-family: var(--Fd);
  font-size: .95rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: .25rem
}

.mst-card-since {
  font-size: .58rem;
  color: var(--muted);
  margin-bottom: .8rem
}

.mst-stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem
}

.stamp {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem
}

.stamp.filled {
  background: rgba(196, 163, 90, .12);
  border: 1px solid rgba(196, 163, 90, .3)
}

.stamp.empty {
  background: var(--s2);
  border: 1px solid var(--border)
}

.mst-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--muted);
  margin-bottom: .35rem
}

.mst-bar-wrap {
  height: 4px;
  background: var(--s3);
  border-radius: 2px;
  margin-bottom: .8rem;
  overflow: hidden
}

.mst-bar-fill {
  height: 100%;
  width: 70%;
  background: var(--warm);
  border-radius: 2px
}

.mst-history {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.mst-hist-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .5rem;
  font-size: .62rem
}

.mst-hist-name {
  color: var(--text)
}

.mst-hist-pts {
  color: var(--warm);
  font-size: .58rem
}

.mst-hist-date {
  color: var(--dim);
  font-size: .58rem
}

/* ── MOCK OFFLINE (food-trucks) ── */
.mock-offline {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  width: 260px;
  font-size: .72rem
}

[data-theme="light"] .mock-offline {
  background: #fff;
  border-color: rgba(26, 23, 19, .1)
}

.mof-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mof-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mof-status {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .65rem
}

.mof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.mof-dot.online {
  background: #4caf50;
  animation: lpulse 2s ease-in-out infinite
}

.mof-status.online-st {
  color: #4caf50
}

.mof-sync {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .65rem;
  color: var(--muted);
  background: rgba(76, 175, 80, .07);
  border: 1px solid rgba(76, 175, 80, .18);
  border-radius: 6px;
  padding: .45rem .65rem;
  margin-bottom: .7rem
}

.mof-sync svg {
  width: 13px;
  height: 13px;
  stroke: #4caf50;
  flex-shrink: 0
}

.mof-orders {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .8rem
}

.mof-order {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto auto;
  align-items: center;
  gap: .4rem;
  padding: .32rem 0;
  border-bottom: 1px solid var(--border)
}

.mof-order:last-child {
  border-bottom: none
}

.mof-order-num {
  font-size: .6rem;
  color: var(--dim);
  font-family: var(--Fd)
}

.mof-order-name {
  color: var(--text)
}

.mof-order-val {
  color: var(--accent);
  font-family: var(--Fd);
  font-size: .8rem;
  white-space: nowrap
}

.mof-order-tag {
  font-size: .55rem;
  padding: .1rem .4rem;
  border-radius: 100px;
  white-space: nowrap
}

.mof-order-tag.synced {
  background: rgba(76, 175, 80, .12);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, .25)
}

.mof-order-tag.pending {
  background: rgba(196, 163, 90, .1);
  color: var(--warm);
  border: 1px solid rgba(196, 163, 90, .25)
}

.mof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border)
}

.mof-stat {
  text-align: center
}

.mof-stat-label {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem
}

.mof-stat-val {
  font-family: var(--Fd);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text)
}

/* ── MOCK EVENT (food-trucks) ── */
.mock-event {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  width: 260px;
  font-size: .72rem
}

[data-theme="light"] .mock-event {
  background: #fff;
  border-color: rgba(26, 23, 19, .1)
}

.mev-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mev-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mev-badge {
  font-size: .6rem;
  color: var(--accent);
  border: 1px solid rgba(232, 83, 10, .3);
  padding: .12rem .5rem;
  border-radius: 100px
}

.mev-events {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .8rem
}

.mev-event {
  padding: .55rem .7rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--s1)
}

.mev-event.active {
  border-color: rgba(232, 83, 10, .25);
  background: rgba(232, 83, 10, .05)
}

.mev-event-name {
  color: var(--text);
  font-size: .72rem;
  margin-bottom: .15rem
}

.mev-event-date {
  color: var(--dim);
  font-size: .6rem;
  margin-bottom: .3rem
}

.mev-event-stats {
  display: flex;
  gap: 1rem
}

.mev-event-stat {
  color: var(--muted);
  font-size: .62rem
}

.mev-event-stat span {
  color: var(--text)
}

.mev-total-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .5rem
}

.mev-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem
}

.mev-compare-item {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .5rem .6rem
}

.mev-compare-label {
  font-size: .58rem;
  color: var(--dim);
  margin-bottom: .2rem
}

.mev-compare-val {
  font-family: var(--Fd);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: .15rem
}

.mev-compare-diff {
  font-size: .6rem
}

.mev-compare-diff.up {
  color: #4caf50
}

/* ── MOCK NFC (food-trucks) ── */
.mock-nfc {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  width: 240px;
  font-size: .72rem
}

[data-theme="light"] .mock-nfc {
  background: #fff;
  border-color: rgba(26, 23, 19, .1)
}

.mn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mn-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mn-live {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .65rem;
  color: #4caf50
}

.mn-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  animation: lpulse 2s ease-in-out infinite
}

.mn-amount {
  text-align: center;
  padding: .7rem 0;
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mn-amount-val {
  font-family: var(--Fd);
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1
}

.mn-amount-sub {
  font-size: .6rem;
  color: var(--muted);
  margin-top: .2rem
}

.mn-methods-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .4rem
}

.mn-methods {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .8rem
}

.mn-method {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .38rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--s1)
}

.mn-method.active {
  border-color: rgba(232, 83, 10, .3);
  background: rgba(232, 83, 10, .07)
}

.mn-method-icon {
  font-size: .9rem;
  line-height: 1
}

.mn-method-name {
  font-size: .68rem;
  color: var(--text)
}

.mn-method.active .mn-method-name {
  color: var(--accent)
}

.mn-items {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border)
}

.mn-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .65rem
}

.mn-item-name {
  color: var(--muted)
}

.mn-item-val {
  color: var(--text)
}

/* ── MOCK SCAN (supermercados) ── */
.mock-scan {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  width: 255px;
  font-size: .72rem
}

[data-theme="light"] .mock-scan {
  background: #fff;
  border-color: rgba(26, 23, 19, .1)
}

.ms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.ms-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.ms-num {
  font-size: .65rem;
  color: var(--accent);
  border: 1px solid rgba(232, 83, 10, .3);
  padding: .1rem .45rem;
  border-radius: 100px
}

.ms-scan-area {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(232, 83, 10, .06);
  border: 1px solid rgba(232, 83, 10, .2);
  border-radius: 8px;
  padding: .6rem .75rem;
  margin-bottom: .7rem
}

.ms-scan-icon {
  font-size: 1.4rem;
  flex-shrink: 0
}

.ms-scan-name {
  color: var(--text);
  font-size: .75rem;
  margin-bottom: .12rem
}

.ms-scan-ean {
  font-size: .58rem;
  color: var(--dim);
  margin-bottom: .1rem
}

.ms-scan-price {
  color: var(--accent);
  font-family: var(--Fd);
  font-size: .9rem
}

.ms-items {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: .7rem
}

.ms-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem;
  align-items: center;
  padding: .25rem 0;
  border-bottom: 1px solid var(--border)
}

.ms-item:last-child {
  border-bottom: none
}

.ms-item-name {
  color: var(--muted)
}

.ms-item-qty {
  color: var(--dim);
  font-size: .65rem
}

.ms-item-price {
  color: var(--text);
  text-align: right
}

.ms-methods {
  display: flex;
  gap: .3rem;
  margin-bottom: .7rem;
  flex-wrap: wrap
}

.ms-method {
  font-size: .6rem;
  padding: .2rem .55rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted)
}

.ms-method.active {
  background: rgba(232, 83, 10, .08);
  border-color: rgba(232, 83, 10, .3);
  color: var(--accent)
}

.ms-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: .6rem;
  border-top: 1px solid var(--border)
}

.ms-total-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.ms-total-val {
  font-family: var(--Fd);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent)
}

/* ── MOCK STOCK (supermercados) ── */
.mock-stock {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  width: 255px;
  font-size: .72rem
}

[data-theme="light"] .mock-stock {
  background: #fff;
  border-color: rgba(26, 23, 19, .1)
}

.msk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .7rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border)
}

.msk-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.msk-updated {
  font-size: .6rem;
  color: #4caf50
}

.msk-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .65rem;
  font-size: .65rem;
  color: var(--dim);
  margin-bottom: .65rem
}

.msk-search svg {
  width: 11px;
  height: 11px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0
}

.msk-items {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .7rem
}

.msk-item {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: .45rem;
  padding: .28rem 0;
  border-bottom: 1px solid var(--border)
}

.msk-item:last-child {
  border-bottom: none
}

.msk-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.msk-item-dot.ok {
  background: #4caf50
}

.msk-item-dot.warn {
  background: var(--warm)
}

.msk-item-dot.low {
  background: #e53935
}

.msk-item-name {
  color: var(--text);
  font-size: .68rem
}

.msk-item-cat {
  color: var(--dim);
  font-size: .58rem
}

.msk-item-qty {
  font-family: var(--Fd);
  font-size: .85rem;
  text-align: right
}

.msk-item-qty.ok {
  color: #4caf50
}

.msk-item-qty.warn {
  color: var(--warm)
}

.msk-item-qty.low {
  color: #e53935
}

.msk-alert {
  background: rgba(229, 57, 53, .07);
  border: 1px solid rgba(229, 57, 53, .2);
  border-radius: 6px;
  padding: .45rem .65rem;
  font-size: .65rem;
  color: #e57373
}

/* ── MOCK REPORTS (supermercados) ── */
.mock-reports {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  width: 255px;
  font-size: .72rem
}

[data-theme="light"] .mock-reports {
  background: #fff;
  border-color: rgba(26, 23, 19, .1)
}

.mr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mr-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mr-period {
  font-size: .62rem;
  color: var(--accent)
}

.mr-big {
  text-align: center;
  padding: .6rem 0;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--border)
}

.mr-big-val {
  font-family: var(--Fd);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1
}

.mr-big-sub {
  font-size: .6rem;
  color: #4caf50;
  margin-top: .2rem
}

.mr-dept {
  margin-bottom: .7rem
}

.mr-dept-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .45rem
}

.mr-dept-item {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem
}

.mr-dept-name {
  color: var(--muted);
  font-size: .65rem
}

.mr-dept-bar-wrap {
  height: 5px;
  background: var(--s1);
  border-radius: 100px;
  overflow: hidden
}

.mr-dept-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  opacity: .7
}

.mr-dept-val {
  color: var(--text);
  font-size: .65rem;
  text-align: right
}

.mr-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border)
}

.mr-kpi {
  text-align: center
}

.mr-kpi-label {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem
}

.mr-kpi-val {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text)
}

/* ── ATTR GRID (lojas-especializadas) ── */
.attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: .8rem
}

.attr-cell {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .45rem .6rem
}

.attr-label {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem
}

.attr-val {
  font-size: .72rem;
  color: var(--text)
}

/* ── APPT MOCK WIDGETS (saloes-beleza) ── */
.mc-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mc-t {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mc-b {
  font-size: .6rem;
  color: var(--warm);
  border: 1px solid rgba(196, 163, 90, .3);
  padding: .12rem .5rem;
  border-radius: 100px
}

.mc-b.g {
  color: #4caf50;
  border-color: rgba(76, 175, 80, .3)
}

.ts {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 7px;
  margin-bottom: .3rem;
  font-size: .68rem
}

.ts.bk {
  background: rgba(196, 163, 90, .08);
  border: 1px solid rgba(196, 163, 90, .2)
}

.ts.fr {
  background: var(--s1);
  border: 1px dashed var(--border)
}

.ts-t {
  font-family: var(--Fd);
  font-size: .75rem;
  font-weight: 300;
  color: var(--warm);
  min-width: 2.8rem
}

.ts-c {
  flex: 1
}

.ts-n {
  color: var(--text);
  font-size: .68rem
}

.ts-s {
  color: var(--muted);
  font-size: .58rem
}

.ts-d {
  font-size: .6rem;
  color: var(--dim);
  white-space: nowrap
}

.lr {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border)
}

.lr:last-of-type {
  border-bottom: none
}

.lr-m {
  flex: 1;
  color: var(--text);
  font-size: .72rem
}

.lr-v {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  white-space: nowrap
}

.big-n {
  font-family: var(--Fd);
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent);
  margin-bottom: .2rem
}

.big-s {
  font-size: .65rem;
  color: var(--muted);
  margin-bottom: .8rem
}

.br-l {
  font-size: .65rem;
  color: var(--muted)
}

.br-w {
  height: 5px;
  background: var(--s1);
  border-radius: 100px;
  overflow: hidden
}

.br-f {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  opacity: .75
}

.br-v {
  font-size: .65rem;
  color: var(--text);
  text-align: right
}

.kpi-l {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem
}

.kpi-v {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text)
}

/* ── MOCK CARD (lojas-retalho) ── */
.mock-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  font-size: .72rem
}

.mock-md {
  width: 270px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45)
}

.mc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border)
}

.mc-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.mc-badge {
  font-size: .6rem;
  color: var(--accent);
  border: 1px solid rgba(232, 83, 10, .3);
  padding: .12rem .5rem;
  border-radius: 100px
}

.mc-badge.green {
  color: #4caf50;
  border-color: rgba(76, 175, 80, .3)
}

.list-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border)
}

.list-row:last-child {
  border-bottom: none
}

.lr-main {
  flex: 1;
  color: var(--text);
  font-size: .72rem
}

.lr-sub {
  color: var(--dim);
  font-size: .6rem
}

.lr-tag {
  font-size: .58rem;
  padding: .1rem .45rem;
  border-radius: 100px;
  white-space: nowrap
}

.lr-tag.ok {
  background: rgba(76, 175, 80, .1);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, .25)
}

.lr-tag.low {
  background: rgba(229, 57, 53, .1);
  color: #e57373;
  border: 1px solid rgba(229, 57, 53, .25)
}

.lr-tag.disc {
  background: rgba(232, 83, 10, .1);
  color: var(--accent);
  border: 1px solid rgba(232, 83, 10, .25)
}

.lr-val {
  font-family: var(--Fd);
  font-size: .9rem;
  font-weight: 300;
  white-space: nowrap
}

.size-grid {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .7rem
}

.sz {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .3rem .45rem;
  text-align: center;
  font-size: .65rem;
  color: var(--text)
}

.sz.warn {
  border-color: rgba(196, 163, 90, .4);
  color: var(--warm)
}

.sz.out {
  opacity: .35;
  text-decoration: line-through
}

.sn {
  font-size: .52rem;
  color: var(--dim);
  margin-top: .1rem
}

.color-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .4rem
}

.col-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent
}

.col-dot.active {
  border-color: var(--warm)
}

.big-num {
  font-family: var(--Fd);
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent);
  margin-bottom: .2rem
}

.big-sub {
  font-size: .65rem;
  color: var(--muted);
  margin-bottom: .8rem
}

.bar-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem
}

.br-label {
  font-size: .65rem;
  color: var(--muted)
}

.br-wrap {
  height: 5px;
  background: var(--s1);
  border-radius: 100px;
  overflow: hidden
}

.br-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  opacity: .75
}

.br-val {
  font-size: .65rem;
  color: var(--text);
  text-align: right
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  margin-top: .6rem
}

.kpi {
  text-align: center
}

.kpi-label {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem
}

.kpi-val {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text)
}

/* WORKFLOW */
.workflow-sec {
  padding: 9rem 0;
  background: var(--s1)
}

[data-theme="light"] .workflow-sec {
  background: var(--s1)
}

.workflow-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem
}

.workflow-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: end;
  margin-bottom: 5rem
}

.workflow-title {
  font-family: var(--Fd);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em
}

.workflow-title em {
  font-style: italic;
  color: var(--muted)
}

.workflow-desc {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.85
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative
}

.workflow-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, var(--border), rgba(232, 83, 10, .2), var(--border));
  z-index: 0
}

.workflow-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 1rem
}

.ws-icon {
  width: 56px;
  height: 56px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.4rem;
  font-size: 1.1rem;
  transition: border-color .3s, background .3s
}

[data-theme="light"] .ws-icon {
  background: var(--bg)
}

.workflow-step:hover .ws-icon {
  border-color: var(--accent);
  background: rgba(232, 83, 10, .06)
}

.ws-num {
  position: absolute;
  top: -8px;
  right: calc(50% - 36px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  font-weight: 500;
  color: var(--bg)
}

.ws-title {
  font-family: var(--Fd);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: .4rem
}

.ws-desc {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.65
}

/* TESTIMONIALS */
.testis {
  padding: 9rem 0
}

.testis-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem
}

.testis-header {
  margin-bottom: 4rem
}

.testis-header h2 {
  font-family: var(--Fd);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1
}

.testis-header h2 em {
  font-style: italic;
  color: var(--muted)
}

.testis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border)
}

.tc {
  background: var(--bg);
  padding: 3rem;
  transition: background .3s
}

[data-theme="light"] .tc {
  background: var(--bg)
}

.tc:hover {
  background: var(--s1)
}

.stars {
  display: flex;
  gap: 3px;
  margin-bottom: 1.8rem
}

.star {
  width: 9px;
  height: 9px;
  background: var(--warm);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

.tq {
  font-family: var(--Fd);
  font-size: 1.05rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 1.8rem;
  color: var(--text)
}

.tn {
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted)
}

.tn span {
  color: var(--warm)
}

/* OTHER BIZ */
.other-biz {
  padding: 8rem 0;
  border-top: 1px solid var(--border)
}

.other-biz-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3.5rem
}

.other-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem
}

.other-title {
  font-family: var(--Fd);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -.02em
}

.other-title em {
  font-style: italic;
  color: var(--muted)
}

.other-see-all {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  cursor: none
}

.other-see-all:hover {
  color: var(--accent)
}

.other-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border)
}

.obiz-card {
  background: var(--bg);
  padding: 1.8rem 1.5rem;
  text-decoration: none;
  transition: background .3s;
  display: block;
  cursor: none
}

[data-theme="light"] .obiz-card {
  background: var(--bg)
}

.obiz-card:hover {
  background: var(--s1)
}

.obiz-num {
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--warm);
  margin-bottom: .5rem
}

.obiz-name {
  font-family: var(--Fd);
  font-size: .98rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3
}

.obiz-arrow {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .6rem;
  transition: color .2s, transform .2s;
  display: inline-block
}

.obiz-card:hover .obiz-arrow {
  color: var(--accent);
  transform: translateX(4px)
}

/* CTA */
.cta {
  padding: 10rem 0;
  text-align: center;
  position: relative;
  overflow: hidden
}

.cta-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(232, 83, 10, .055) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none
}

.cring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--border);
  pointer-events: none
}

.cring:nth-child(2) {
  width: 560px;
  height: 560px
}

.cring:nth-child(3) {
  width: 400px;
  height: 400px;
  border-color: rgba(232, 83, 10, .06)
}

.cta-tag {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
  position: relative
}

.cta-h {
  font-family: var(--Fd);
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: .95;
  margin-bottom: 2rem;
  position: relative
}

.cta-h em {
  font-style: italic;
  color: var(--muted)
}

.cta-s {
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 3.5rem;
  position: relative
}

.cta-ac {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  position: relative
}

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

/* ── FOOTER INNER ── */
.fi {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 3.5rem 3rem;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.phero-inner {
  padding: 0 3.5rem
}

/* Brand column */
.fi-brand {}

.flo {
  text-decoration: none;
  display: flex;
  align-items: center
}

.fi-tagline {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 1.1rem;
  max-width: 24ch
}

.fi-social {
  display: flex;
  gap: .5rem;
  margin-top: 1.6rem
}

.fi-soc {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: border-color .2s, color .2s;
  text-decoration: none
}

.fi-soc:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.fi-soc svg {
  width: 12px;
  height: 12px;
  fill: currentColor
}

/* Nav columns */
.fi-col {}

.fi-col-title {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem
}

.fi-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0
}

.fi-links li a {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  text-decoration: none;
  padding: .32rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s
}

.fi-links li a:hover {
  color: var(--text)
}

/* CTA column */
.fi-cta {}

.fi-cta-text {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.4rem
}

.fi-cta-btn {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  font-family: var(--Fb);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .75rem 1.8rem;
  text-decoration: none;
  border-radius: 1px;
  transition: opacity .2s
}

.fi-cta-btn:hover {
  opacity: .78
}

/* Legacy compat */
.fls {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  list-style: none
}

.fls a {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s
}

.fls a:hover {
  color: var(--text)
}

/* Bottom bar */
.fi-bar {
  border-top: 1px solid var(--border);
  padding: 1.1rem 3.5rem;
  text-align: center;
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--dim)
}

@media(max-width:900px) {
  nav {
    padding: 1.4rem 1.5rem
  }

  .nlinks {
    display: none
  }

  .breadcrumb {
    padding: 7rem 1.5rem 0
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important
  }

  .hero-left {
    padding: 2rem 1.5rem 4rem !important
  }

  .hero-right {
    display: none !important
  }

  .stat-inner,
  .challenges-inner,
  .workflow-inner,
  .testis-inner,
  .other-biz-inner {
    padding: 0 1.5rem
  }

  .stat-inner {
    grid-template-columns: 1fr 1fr
  }

  .challenges-inner,
  .workflow-header,
  .other-header {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .feat-block {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 1.5rem
  }

  .feat-block.flip {
    direction: ltr
  }

  .feat-block .feat-visual,
  .feat-block.flip .feat-visual {
    order: -1
  }

  .workflow-steps {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .workflow-steps::before {
    display: none
  }

  .testis-grid,
  .other-grid {
    grid-template-columns: 1fr
  }

  .photo-sec2 {
    grid-template-columns: 1fr;
    height: 80vw
  }

  .photo-sec2 .ps2-img:last-child {
    display: none
  }

  .fi {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 3rem 1.5rem 2rem
  }

  .fi-brand {
    grid-column: 1 / -1
  }



  .fi-bar {
    padding: 1rem 1.5rem
  }

  .phero-inner {
    padding: 0 1.5rem
  }

  .phero {
    min-height: auto !important;
    align-items: flex-start !important;
    padding: 6rem 0 3.5rem !important
  }

  .phero-wm {
    display: none !important
  }

  .hero-acts {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem
  }

  .hero-acts .bp {
    white-space: nowrap
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem
  }

  .hero-actions .bp {
    white-space: nowrap
  }

  .cta {
    padding: 5rem 1.5rem
  }

  footer {
    padding: 0
  }

  /* ── SECTION PADDING REDUCTIONS ── */
  .challenges,
  .features-sec,
  .workflow-sec,
  .testis,
  .other-biz {
    padding: 5rem 0
  }

  /* ── SPEED BAND: 4→2 COLS ── */
  .speed-band {
    padding: 2.5rem 0
  }

  .speed-inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 1.5rem
  }

  .spd-block {
    padding: 1.5rem 0;
    border-right: none;
    border-bottom: 1px solid var(--border)
  }

  .spd-block:last-child {
    border-bottom: none
  }

  /* ── STAT BAND ── */
  .stat-band {
    padding: 2rem 0
  }

  /* ── PHOTO BAND ── */
  .photo-band {
    height: 45vh
  }

  /* ── WRAP PADDING FOR PAGES WITHOUT OWN MOBILE BLOCK ── */
  .wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
}

/* ── BACK TO TOP ─────────────────────────────────── */
.btt {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .3s, transform .3s, background .2s;
  z-index: 995;
  box-shadow: 0 4px 20px rgba(232, 83, 10, .4);
}

.btt.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}

.btt:hover {
  background: var(--color-brand-hover, #FF7230);
}

.btt svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}