@charset "UTF-8";
/* ============================================================
   PaySpot ME — Index redesign design system
   Used ONLY by index.html / index-en.html.
   Modern fintech look: solid white sticky header, dark aurora
   hero, soft rounded cards, brand-red accents. Self-contained
   (does not rely on the legacy style.css / main.js).
   ============================================================ */

/* Poppins is now SELF-HOSTED (was a render-blocking Google Fonts <link>,
   ~800ms on the critical path + an extra 3rd-party origin). woff2 files
   live in ../fonts; only the subset/weight a glyph needs is downloaded
   thanks to unicode-range. font-display:swap so text paints immediately.
   The two above-the-fold weights (400 body, 800 h1) are <link rel=preload>
   in the HTML head. latin + latin-ext only (Montenegrin č ć ž š đ). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --red: #e10000;
  --red-600: #c20000;
  --red-700: #a30000;
  --red-300: #ff6a62;
  --red-soft: #ffecec;

  --ink: #14151a; /* near-black */
  --ink-2: #1d1f27;
  --ink-3: #2a2d37;
  --text: #1f2330;
  --muted: #626875;
  --muted-2: #8a909c;
  --line: #e9ebf0;
  --line-2: #f0f2f6;

  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-tint: #fbf7f7;

  --radius-xl: 26px;
  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;

  --shadow-sm: 0 2px 8px rgba(16, 18, 27, 0.06);
  --shadow-md: 0 14px 34px rgba(16, 18, 27, 0.1);
  --shadow-lg: 0 30px 70px rgba(16, 18, 27, 0.16);
  --shadow-red: 0 16px 36px rgba(225, 0, 0, 0.28);

  --container: 1200px;
  --header-h: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --grad-red: linear-gradient(120deg, #ff3b30 0%, #e10000 55%, #b00000 100%);

  /* PaySpot diamond mark as inline SVG — brand watermark for section
     backgrounds (light surfaces) and dark surfaces (white, low opacity).
     Same geometry as img/payspot-pozadina.png but tintable + scalable. */
  --mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23e9edf3' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E");
  --mark-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23ffffff' fill-opacity='.06' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E");
  /* light-red variants for the agent-section canvas (brand red mixed
     with white, hue 0): one for the tinted canvas itself, a fainter
     one for inside white cards */
  --mark-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23f4d2d2' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E");
  --mark-blush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23fbeaea' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E");
  /* deeper cool mark for the slate canvas (about section) — the
     standard --mark-light disappears on a tinted gray background */
  --mark-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23dce2ea' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 3px solid rgba(225, 0, 0, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 96px 0;
  position: relative;
}
.section--soft {
  /* about ("dossier") canvas — decisively deeper slate so the white
     slab floats; the cool counterpart to the agent's light-red canvas,
     separated from it by the dark CTA band */
  background-color: #e9ecf1;
  background-image: var(--mark-deep), var(--mark-deep);
  background-repeat: no-repeat;
  background-position: right -130px top 100px, left -160px bottom 140px;
  background-size: 440px auto, 380px auto;
}
.section--tight {
  padding: 72px 0;
}
[id] {
  scroll-margin-top: 96px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .eyebrow {
  justify-content: center;
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title .hl {
  color: var(--red);
}
.section-sub {
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn i {
  font-size: 0.95em;
}
.btn-primary {
  background: var(--grad-red);
  color: #fff;
  box-shadow: var(--shadow-red);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(225, 0, 0, 0.36);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-3px);
}
.btn-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(6px); /* Safari < 18 */
  backdrop-filter: blur(6px);
}
.btn-light:hover {
  background: #fff;
  color: var(--ink);
  transform: translateY(-3px);
}
.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--red);
  transition: gap 0.25s var(--ease);
}
.link-arrow i {
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover {
  gap: 12px;
}
.link-arrow:hover i {
  transform: translateX(3px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.top-bar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
  max-height: 60px;
  overflow: hidden;
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  gap: 18px;
}
.top-bar .ti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.top-bar .ti i {
  color: var(--red-300);
}
.top-bar .ti span {
  color: rgba(255, 255, 255, 0.6);
}
.top-bar .tb-left {
  display: flex;
  gap: 26px;
}
.top-bar .tb-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.top-bar a:hover {
  color: #fff;
}
.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* round chips — the flag icons are circular, so a square box shows the
   whole flag (the old 26×18 rect cropped the circle's top & bottom) */
.lang a {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.5;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.lang a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.lang a:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.lang a.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--red-300);
}

/* hide top bar when scrolled */
.scrolled .top-bar {
  max-height: 0;
  opacity: 0;
}

.nav-bar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px); /* Safari < 18 */
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.scrolled .nav-bar {
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.97);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}
.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.brand img {
  height: 40px;
  width: auto;
  max-width: none;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}
.nav-menu > li > a,
.nav-menu > li > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--pill);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-menu > li > a:hover,
.nav-menu > li > button:hover,
.nav-menu > li.open > button {
  color: var(--red);
  background: var(--red-soft);
}
.nav-menu .caret {
  font-size: 11px;
  transition: transform 0.25s var(--ease);
}
.nav-menu li.open .caret {
  transform: rotate(180deg);
}

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-actions .pilllink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 14px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  transition: all 0.25s var(--ease);
}
.nav-actions .pilllink i {
  color: var(--red);
}
.nav-actions .pilllink:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
}

/* Mega dropdown (desktop) */
.has-mega {
  position: relative;
}
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 560px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 26px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    visibility 0.25s;
  z-index: 30;
}
.has-mega:hover .mega,
.has-mega.open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 18px;
}
.mega .col h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 6px 12px 10px;
}
.mega a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mega a:hover {
  background: var(--bg-soft);
  color: var(--red);
}
.mega a .mi {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 16px;
  transition: all 0.2s var(--ease);
}
.mega a:hover .mi {
  background-color: var(--red);
  color: #fff;
}
.mega a.soon {
  position: relative;
  pointer-events: none;
  cursor: default;
}
.mega a.soon::after {
  content: attr(data-soon);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  background: var(--line-2);
  padding: 2px 8px;
  border-radius: var(--pill);
  margin-left: auto;
}
/* "Coming soon" services in the mobile menu — not clickable */
.m-sub a[href$="#usluge"] {
  pointer-events: none;
  cursor: default;
}

/* Hamburger + mobile menu */
.hamburger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease),
    top 0.3s var(--ease);
}
.hamburger span:nth-child(1) {
  top: 16px;
}
.hamburger span:nth-child(2) {
  top: 22px;
}
.hamburger span:nth-child(3) {
  top: 28px;
}
body.menu-open .hamburger span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}
body.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
}
body.menu-open .hamburger span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

.mobile-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, 86vw);
  background: #fff;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: 22px;
  overflow-y: auto;
}
body.menu-open .mobile-panel {
  transform: translateX(0);
}
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 22, 0.5);
  -webkit-backdrop-filter: blur(2px); /* Safari < 18 */
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
  z-index: 1100;
}
body.menu-open .mobile-overlay {
  opacity: 1;
  visibility: visible;
}
.mobile-panel .mp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.mobile-panel .mp-head img {
  height: 34px;
  /* width:auto kills the 430px width attribute — without it the logo
     stretches across the panel and runs under the close button */
  width: auto;
  flex: 0 0 auto;
}
.mp-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 18px;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.m-nav a,
.m-nav button {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-2);
}
.m-nav .m-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.m-nav .m-acc.open .m-sub {
  max-height: 520px;
}
.m-nav .m-acc.open > button {
  color: var(--red);
}
.m-nav .m-sub a {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--muted);
  padding-left: 18px;
}
.m-nav .m-acc .caret {
  transition: transform 0.3s var(--ease);
}
.m-nav .m-acc.open .caret {
  transform: rotate(180deg);
}
.mobile-panel .mp-actions {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}
.mobile-panel .mp-contact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  display: grid;
  gap: 10px;
}
.mobile-panel .mp-contact a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.mobile-panel .mp-contact i {
  color: var(--red);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* "the emblem stage": clean ink, a single red bloom behind the
     terminal side — no atmospheric blobs, no grid texture; the brand
     diamond emblem (see .hero-visual) carries the composition */
  background-color: #0e0f14;
  background-image: radial-gradient(
      1000px 620px at 76% 22%,
      rgba(225, 0, 0, 0.13),
      transparent 62%
    ),
    linear-gradient(180deg, #15161d 0%, #0e0f14 58%, #101117 100%);
  color: #fff;
  overflow: hidden;
  padding: 84px 0 96px;
}
/* red hairline seam closing the hero — same beam device as the vault */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(720px, 86%);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(225, 0, 0, 0.75), transparent);
  z-index: 2;
}
/* Scroll-pinned hero sequence (desktop): .hero-track supplies extra scroll
   distance; the hero sticks below the header while that distance is being
   consumed — scroll progress rotates the terminal and brings the chips in —
   then the page continues scrolling normally. On mobile the track has no
   height, so nothing pins. */
.hero-track {
  position: relative;
}
@media (min-width: 901px) {
  .hero-track {
    height: 215vh;
  }
  .hero {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 0;
  }
  .hero > .container {
    width: 100%;
  }
  /* keep the whole device + chips inside the pinned viewport
     (.hero prefix outweighs the later base .tilt-3d width rule) */
  .hero .tilt-3d {
    width: min(290px, 42vh);
  }
}
/* Mobile pinned sequence (≤900px): the copy reads first; once the user
   scrolls down to the terminal, the hero sticks to the viewport bottom
   while the ::after spacer is consumed — site.js maps that distance to
   the same left→right turn + chip stagger as the desktop pin, then the
   page scrolls on. The spacer must be real content (not padding) so the
   sticky hero has room to roam inside the track's content box. Gated to
   JS + motion: no-JS / reduced-motion visits get a plain static hero. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .has-js .hero-track::after {
    content: "";
    display: block;
    height: 85vh;
    height: 85svh;
  }
  /* negative top inset = viewport − hero height (set by site.js as
     --hero-stick-top): the hero sticks the moment its bottom edge meets
     the viewport bottom — a bottom inset can't do this, it only ever
     shifts elements up */
  .has-js .hero {
    position: sticky;
    top: var(--hero-stick-top, 0px);
  }
  /* the visual fills the pinned viewport so the terminal plays centered;
     110px ≈ hero bottom padding + a sliver of the copy tail up top */
  .has-js .hero .hero-visual {
    min-height: calc(100vh - var(--header-h) - 110px);
    min-height: calc(100svh - var(--header-h) - 110px);
  }
  /* Cap the terminal by the PINNED HEIGHT, not just width. The device is
     ~2.18× taller than wide; left width-only (min(280px,70%)) it grows with
     screen width and, on phones that aren't tall, overflows the pinned
     viewport — its top is then clipped under the fixed header (and a chip
     with it). The height term keeps the whole device + chips inside the
     stage on every phone. 0.42 ≈ 1/2.18 minus headroom for the ±16px float
     and the top/bottom chips; on tall phones the 70% term still wins, so the
     device keeps its original size there. */
  .has-js .hero .tilt-3d {
    width: min(280px, 70%, calc((100vh - var(--header-h) - 120px) * 0.42));
    width: min(280px, 70%, calc((100svh - var(--header-h) - 120px) * 0.42));
  }
}
/* while the pinned sequence runs, JS choreographs the chips */
.hero-seq .chip {
  animation: none;
  opacity: 0;
  will-change: transform, opacity;
}
/* page-load choreography: the copy column enters as one orchestrated
   sequence (badge → headline → lead → CTAs → trust row); the device
   has its own "rise". JS + motion-OK visits only. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .hero-copy > * {
    opacity: 0;
    animation: heroIn 0.7s var(--ease) forwards;
  }
  .has-js .hero-copy > h1 {
    animation-delay: 0.05s;
  }
  .has-js .hero-copy > .hero-lead {
    animation-delay: 0.18s;
  }
  .has-js .hero-copy > .hero-cta {
    animation-delay: 0.32s;
  }
  .has-js .hero-copy > .hero-trust {
    animation-delay: 0.46s;
  }
}
/* film grain over the dark gradient — breaks up banding and the
   "clean CSS gradient" look; sits above the canvas, below content */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  margin-top: 0;
  font-size: clamp(32px, 8vw, 56px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.025em;
  /* let the browser design a balanced rag instead of ragged flow
     wrapping — far steadier across the clamp + the pinned column */
  text-wrap: balance;
}
/* the key phrase sits in a solid red stamp — a marker swipe, not the
   gradient-text default. inline-block + nowrap keeps it ONE single-line
   rectangle that places as an atomic unit, so it never splits mid-phrase
   (the chunky two-line block) and never collides with adjacent lines
   (Poppins' tall metrics broke per-line cloned backgrounds). The copy
   keeps this phrase short enough to stay on one line down to 320px. */
.hero h1 .hl {
  display: inline-block;
  white-space: nowrap;
  background: var(--grad-red);
  color: #fff;
  padding: 0.04em 0.3em 0.12em;
  border-radius: 0.16em;
  margin: 0.04em 0;
  box-shadow: 0 12px 36px rgba(225, 0, 0, 0.35);
}
.hero-lead {
  margin-top: 26px;
  max-width: 520px;
  font-size: 17.5px;
  color: rgba(255, 255, 255, 0.72);
  border-left: 3px solid var(--red);
  padding-left: 18px;
}
.hero-cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* a label change must never crop a hero button into two rows */
.hero-cta .btn {
  white-space: nowrap;
}
.hero-trust {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
/* quiet uppercase micro-labels with red diamond bullets — the same
   tag system the section cards use */
.hero-trust .ht {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* the FA <i> becomes the diamond bullet itself (glyph hidden) */
.hero-trust .ht i {
  width: 7px;
  height: 7px;
  font-size: 0;
  border-radius: 1.5px;
  background: var(--red);
  transform: rotate(45deg);
}

/* Hero visual — 3D terminal */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  perspective: 1200px;
}
/* the emblem stage — concentric brand diamonds behind the terminal
   (the mark's own 45° geometry instead of generic orbital circles):
   an inner dark plinth diamond lit by a red bloom, and a wider
   hairline outline diamond around it */
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  transform: rotate(45deg);
  pointer-events: none;
}
.hero-visual::before {
  width: min(330px, 56%);
  height: min(330px, 56%);
  border-radius: 36px;
  background: linear-gradient(145deg, #1d1f28, #111218);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 150px rgba(225, 0, 0, 0.32);
}
.hero-visual::after {
  width: min(500px, 86%);
  height: min(500px, 86%);
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
/* JS-driven tilt rig: scroll progress + pointer set rotateX/rotateY here.
   The static pose below is the no-JS / reduced-motion fallback. */
.tilt-3d {
  position: relative;
  z-index: 2;
  width: min(360px, 80%);
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-20deg);
  will-change: transform;
}
/* Faux-3D device: the front face is the photo; site.js stacks darkened
   clones of it behind along the Z axis, so when the rig rotates the
   terminal shows real thickness (dark plastic side) instead of a card.
   NOTE: keep filter/backdrop-filter/opacity OFF .device-3d itself — any
   of those would flatten the preserve-3d context and kill the depth. */
.device-3d {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  animation: rise 1s var(--ease) both, floaty 6s ease-in-out 1s infinite;
}
.device-3d .d-front {
  position: relative;
  width: 100%;
  height: auto;
  /* fallback only — site.js sets translateZ to half the slab thickness */
  transform: translateZ(80px);
  filter: drop-shadow(0 34px 48px rgba(0, 0, 0, 0.55));
}
/* WebGL terminal (js/terminal3d.js): the canvas replaces photo + slices.
   The hidden photo stays in flow so the layout box (and the chips around
   it) keep their exact size — the canvas just paints over it. */
.device-3d .gl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.device-3d.gl-on .d-front {
  visibility: hidden;
}
/* baked poster: a pre-rendered frame of the WebGL model at its start
   pose (one per language). Shown from the moment WebGL looks viable
   (.gl-pending, set by terminal3d.js) until the live canvas takes over
   (.gl-on) — so the page never flashes the flat photo and the canvas
   swap is pixel-aligned. site.js keeps stage rotation off while the
   poster is up; its pose is baked into the image. */
.device-3d .d-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.device-3d.gl-pending .d-front {
  visibility: hidden;
}
.device-3d.gl-pending .d-poster {
  display: block;
}
.device-3d.gl-on .d-poster {
  display: none;
}
/* depth slices injected by site.js (translateZ + brightness set inline) */
.device-3d .d-slice {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Pre-baked looping terminal for touch phones: a transparent VP9 WebM of
   the same 3D model, played in place of the WebGL build (which is gated off
   ≤900px coarse) and the old depth-slice fallback. site.js attaches the src
   only on that path, so other devices never download it; browsers that can't
   play the WebM (e.g. iOS Safari) keep the poster still. Hidden by default. */
.device-3d .d-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  pointer-events: none;
}
@media (max-width: 900px) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .device-3d .d-loop {
    display: block;
  }
  /* the loop covers the stage; hide the flat photo underneath it */
  .device-3d:not(.loop-failed) .d-front {
    visibility: hidden;
  }
}
/* WebM unsupported → reveal the static photo, drop the empty video box */
.device-3d.loop-failed .d-loop {
  display: none;
}
.chip {
  position: absolute;
  z-index: 3; /* above the tilted device rig */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  /* dark glass — the vault card language instead of white stickers */
  background: linear-gradient(160deg, rgba(37, 39, 48, 0.94), rgba(17, 18, 23, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: floaty 5s ease-in-out infinite;
}
.chip i {
  width: 28px;
  height: 28px;
  margin: 0 3px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(225, 0, 0, 0.16);
  border: 1px solid rgba(255, 106, 98, 0.32);
  color: var(--red-300);
  transform: rotate(45deg);
}
.chip i::before {
  display: block;
  transform: rotate(-45deg);
}
.chip small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}
.chip-1 {
  top: 8%;
  left: -6%;
  animation-delay: 0.4s;
}
.chip-2 {
  bottom: 14%;
  right: -2%;
  animation-delay: 1.1s;
}
.chip-3 {
  bottom: 3%;
  left: 8%;
  animation-delay: 0.8s;
}

/* ============================================================
   PARTNERS STRIP
   ============================================================ */
.partners {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.partners .container {
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.partners .pl-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.partners-logos {
  display: flex;
  align-items: center;
  gap: 38px;
  flex-wrap: wrap;
  justify-content: center;
}
.partners-logos a {
  display: inline-flex;
  align-items: center;
}
.partners-logos img {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.partners-logos a:hover img {
  opacity: 1;
  transform: translateY(-2px);
}
/* Addiko & Lovćen ship white-on-transparent logos — darken them so
   they're visible on the light partner backgrounds / white cards. */
.partners-logos img[src*="adiko"],
.partners-logos img[src*="lovcen"],
.f-partners img[src*="adiko"],
.f-partners img[src*="lovcen"] {
  filter: brightness(0) opacity(0.72);
}

/* ============================================================
   SERVICES — the ink vault
   One large rounded ink panel set on white (echoes the dark
   aurora hero): centered stacked header, dark-glass cards with
   red diamond icon tiles, one red feature card, one white
   "paper" accent card and a dashed "coming soon" cell. Each
   card carries a category tag that mirrors the nav taxonomy
   (Stanovništvo / Pravna lica).
   ============================================================ */
.section-services {
  background: #fff;
}
.services-panel {
  position: relative;
  border-radius: 44px;
  padding: clamp(44px, 5.5vw, 72px) clamp(22px, 4.4vw, 64px)
    clamp(22px, 3.2vw, 44px);
  overflow: hidden;
  background-color: var(--ink);
  /* layers: hairline beam on the top edge, two brand-red aurora
     glows, diamond watermark */
  background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 106, 98, 0.55),
      transparent
    ),
    radial-gradient(
      900px 460px at 82% -12%,
      rgba(225, 0, 0, 0.18),
      transparent 62%
    ),
    radial-gradient(
      720px 460px at -8% 108%,
      rgba(225, 0, 0, 0.12),
      transparent 60%
    ),
    var(--mark-white);
  background-repeat: no-repeat;
  background-position: center top, 0 0, 0 0, right -120px top -140px;
  background-size: min(520px, 70%) 1px, auto, auto, 520px auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow-lg);
}
.services-head {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}
.services-head .eyebrow {
  justify-content: center;
  color: var(--red-300);
  margin-bottom: 16px;
}
.services-head .eyebrow::before,
.services-head .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red-300);
}
.services-head .section-title {
  color: #fff;
}
.services-head .section-title .hl {
  background: linear-gradient(120deg, #ff6a62, #ff2018);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.services-head .section-sub {
  max-width: 56ch;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.64);
}

.services-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  min-height: 232px;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02) 58%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.3s var(--ease);
}
/* red bloom that fades in behind the content on hover */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px 240px at 18% -8%,
    rgba(225, 0, 0, 0.2),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.svc-card > * {
  position: relative;
  z-index: 1;
}
a.svc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
a.svc-card:hover::before {
  opacity: 1;
}
/* category tag — mirrors the nav taxonomy; diamond bullet */
.svc-tag {
  position: absolute;
  z-index: 1;
  top: 26px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.svc-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--red-300);
  transform: rotate(45deg);
}
/* diamond icon tile — rotated square echoes the logo mark; holds an
   inlined Tabler stroke icon (counter-rotated back upright) */
.svc-ico {
  width: 52px;
  height: 52px;
  margin: 11px 0 30px 11px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--red-300);
  background: rgba(225, 0, 0, 0.12);
  border: 1px solid rgba(255, 106, 98, 0.28);
  transform: rotate(45deg);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.svc-ico svg {
  transform: rotate(-45deg);
}
a.svc-card:hover .svc-ico {
  background-color: var(--red);
  border-color: var(--red);
  color: #fff;
}
.svc-name {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
}
.svc-desc {
  display: block;
  margin: 8px 0 22px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.6);
}
/* card footer: quiet label + arrow, anchored by a hairline */
.svc-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.svc-cta-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s var(--ease);
}
a.svc-card:hover .svc-cta-label {
  color: #fff;
}
.svc-go {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.35s var(--ease);
}
a.svc-card:hover .svc-go {
  background-color: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(-45deg);
}

/* feature card — brand red */
.svc-feature {
  grid-column: span 2;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: var(--red-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23ffffff' fill-opacity='.12' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E"),
    var(--grad-red);
  background-repeat: no-repeat;
  background-position: right -70px bottom -150px, 0 0;
  background-size: 380px auto, auto;
  box-shadow: var(--shadow-red);
}
.svc-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 14px;
}
.svc-feature .svc-name {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.15;
  max-width: 22ch;
}
.svc-feature .svc-desc {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  max-width: 48ch;
}
.svc-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-chips span {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.svc-feature .svc-go {
  width: 42px;
  height: 42px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
a.svc-feature:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 24px 48px rgba(225, 0, 0, 0.3);
}
a.svc-feature:hover .svc-go {
  background-color: #fff;
  border-color: #fff;
  color: var(--red);
}
.svc-feature .svc-tag {
  color: rgba(255, 255, 255, 0.8);
}
.svc-feature .svc-tag::before {
  background: #fff;
}

/* white "paper" accent card — the one light surface in the vault */
.svc-paper {
  background: #fff;
  background-image: var(--mark-light);
  background-repeat: no-repeat;
  background-position: right -60px top -70px;
  background-size: 240px auto;
  border-color: #fff;
}
.svc-paper::before {
  background: radial-gradient(
    420px 240px at 18% -8%,
    rgba(225, 0, 0, 0.07),
    transparent 62%
  );
}
a.svc-paper:hover {
  border-color: #fff;
}
.svc-paper .svc-ico {
  color: var(--red);
  background: var(--red-soft);
  border-color: #ffd3d3;
}
.svc-paper .svc-name {
  color: var(--ink);
}
.svc-paper .svc-desc {
  color: var(--muted);
}
.svc-paper .svc-cta {
  border-top-color: var(--line);
}
.svc-paper .svc-cta-label {
  color: var(--muted);
}
a.svc-paper:hover .svc-cta-label {
  color: var(--red);
}
.svc-paper .svc-go {
  color: var(--ink);
  border-color: #d8dbe2;
}
.svc-paper .svc-tag {
  color: var(--muted-2);
}
.svc-paper .svc-tag::before {
  background: var(--red);
}

/* "coming soon" cell */
.svc-soon {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.035);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.sp-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.soon-duo {
  margin-top: 6px;
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
  align-content: center;
}
.soon-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.soon-item .dot {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--red);
}
.soon-item .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--red);
  animation: ping 2.4s var(--ease) infinite;
}
.soon-item b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.soon-item div > span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* Card entrance: restate the reveal transition together with the hover
   transform/shadow (the generic .has-js [data-reveal] rule would
   otherwise drop them), and stagger the cells. The delay lists are
   per-property: only opacity/transform wait, hover stays instant. */
.has-js .services-mosaic > [data-reveal] {
  transition: opacity 0.6s var(--ease), transform 0.4s var(--ease),
    box-shadow 0.35s var(--ease), border-color 0.3s var(--ease);
}
.has-js .services-mosaic > [data-reveal]:nth-child(2) {
  transition-delay: 60ms, 60ms, 0s, 0s;
}
.has-js .services-mosaic > [data-reveal]:nth-child(3) {
  transition-delay: 120ms, 120ms, 0s, 0s;
}
.has-js .services-mosaic > [data-reveal]:nth-child(4) {
  transition-delay: 180ms, 180ms, 0s, 0s;
}
.has-js .services-mosaic > [data-reveal]:nth-child(5) {
  transition-delay: 240ms, 240ms, 0s, 0s;
}
.has-js .services-mosaic > [data-reveal]:nth-child(6) {
  transition-delay: 300ms, 300ms, 0s, 0s;
}
.has-js .services-mosaic > [data-reveal]:nth-child(7) {
  transition-delay: 360ms, 360ms, 0s, 0s;
}

/* ============================================================
   BECOME AGENT — warm paper grid with a red "earnings" heart
   Light breather between two dark slabs (services vault above,
   CTA band below). Asymmetric 12-col grid: two wide horizontal
   cards (the services a shop introduces), then three benefit
   cards with the red gradient earnings card at the center. A
   soft red halo behind the grid grounds the red card. Same
   diamond icon language as the services vault.
   ============================================================ */
.agent {
  /* light-red canvas — clearly tinted so the white cards float instead
     of blending in; fades from white at the top seam (services section
     is white) and deepens toward the bottom where the red card and
     halo sit; hard cut into the dark CTA band below is intentional */
  background-color: #f9e2e2;
  background-image: var(--mark-rose), var(--mark-rose),
    radial-gradient(
      760px 440px at 50% 96%,
      rgba(225, 0, 0, 0.08),
      transparent 65%
    ),
    linear-gradient(180deg, #fff 0%, #fdf0f0 170px, #f9e2e2 100%);
  background-repeat: no-repeat;
  background-position: right -150px top 130px, left -160px bottom 150px, 0 0,
    0 0;
  background-size: 460px auto, 390px auto, auto, auto;
}
.agent-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.agent-head .eyebrow {
  justify-content: center;
  margin-bottom: 16px;
}
.agent-head .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.agent-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.agent-head h2 .hl {
  color: var(--red);
}
.agent-head .lead {
  max-width: 56ch;
  margin: 18px auto 0;
  color: var(--text);
  font-size: 16.5px;
}
/* the lead's closing line becomes a small system label that
   introduces the grid — diamond bullets echo the vault tags */
.agent-head .lead strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 26px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.agent-head .lead strong::before,
.agent-head .lead strong::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--red);
  transform: rotate(45deg);
}
.earn-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
/* crisp white card floating on the rose canvas — no gray border;
   warm-toned shadows carry the separation instead */
.earn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  padding: 30px 28px;
  background-color: #fff;
  background-image: var(--mark-blush);
  background-repeat: no-repeat;
  background-position: right -70px top -80px;
  background-size: 230px auto;
  border: 1px solid #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 6px rgba(150, 30, 30, 0.05),
    0 16px 36px rgba(150, 30, 30, 0.1);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.3s var(--ease);
}
.earn-card:hover {
  transform: translateY(-6px);
  border-color: #ffc9c9;
  box-shadow: 0 4px 10px rgba(150, 30, 30, 0.06),
    0 26px 52px rgba(150, 30, 30, 0.16);
}
/* top row: the two services a shop introduces, set horizontally */
.earn-wide {
  grid-column: span 7;
}
.earn-side {
  grid-column: span 5;
}
.earn-wide,
.earn-side {
  flex-direction: row;
  align-items: center;
  gap: 26px;
  padding: 30px 34px;
}
.earn-ico {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  margin: 10px 0 28px 10px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid #ffd6d2;
  transform: rotate(45deg);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.earn-wide .earn-ico,
.earn-side .earn-ico {
  margin: 10px;
}
.earn-ico svg {
  transform: rotate(-45deg);
}
.earn-card:hover .earn-ico {
  background-color: var(--red);
  border-color: var(--red);
  color: #fff;
}
.earn-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.earn-wide h3,
.earn-side h3 {
  font-size: 19px;
}
.earn-card p {
  margin-top: 7px;
  font-size: 14.5px;
  color: var(--muted);
}
/* the red heart of the grid — the card that is literally about
   earnings sits at the center of the bottom row */
.earn-red {
  border-color: transparent;
  background-color: var(--red-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath fill='%23ffffff' fill-opacity='.13' d='M94 16L16 94L76 94L94 76ZM106 16L184 94L124 94L106 76ZM184 106L136 154L106 124L124 106ZM16 106L140 230L170 200L76 106Z'/%3E%3C/svg%3E"),
    var(--grad-red);
  background-repeat: no-repeat;
  background-position: right -60px bottom -110px, 0 0;
  background-size: 260px auto, auto;
  box-shadow: var(--shadow-red);
}
.earn-red:hover {
  border-color: transparent;
  box-shadow: 0 22px 44px rgba(225, 0, 0, 0.34);
}
.earn-red .earn-ico {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
}
.earn-red:hover .earn-ico {
  background-color: #fff;
  border-color: #fff;
  color: var(--red);
}
.earn-red h3 {
  color: #fff;
}
.earn-red p {
  color: rgba(255, 255, 255, 0.86);
}

/* entrance stagger — restates hover transitions (see the
   services-mosaic note: the generic reveal rule would drop them) */
.has-js .earn-grid > [data-reveal] {
  transition: opacity 0.6s var(--ease), transform 0.4s var(--ease),
    box-shadow 0.35s var(--ease), border-color 0.3s var(--ease);
}
.has-js .earn-grid > [data-reveal]:nth-child(2) {
  transition-delay: 60ms, 60ms, 0s, 0s;
}
.has-js .earn-grid > [data-reveal]:nth-child(3) {
  transition-delay: 120ms, 120ms, 0s, 0s;
}
.has-js .earn-grid > [data-reveal]:nth-child(4) {
  transition-delay: 180ms, 180ms, 0s, 0s;
}
.has-js .earn-grid > [data-reveal]:nth-child(5) {
  transition-delay: 240ms, 240ms, 0s, 0s;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 160% at 0% 0%, #2a0d12, #14151a 60%);
  border-radius: 0;
}
.cta-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 56px;
  padding-bottom: 56px;
  position: relative;
  z-index: 2;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -60px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(225, 0, 0, 0.5), transparent 65%);
  filter: blur(50px);
}
.cta-band h3 {
  color: #fff;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

/* ============================================================
   ABOUT — "the dossier"
   One massive white slab on the slate canvas, read as the
   institution's founding document: the narrative typeset large
   on paper (left), the vision + animated stats as a fused
   full-height ink tower (right, same language as the services
   vault), and the team photo marquee embedded as a film strip
   across the slab's bottom edge.
   ============================================================ */
.section--soft .section-head .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.dossier {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.dossier-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
/* paper zone — the narrative as a document */
.dossier-story {
  padding: clamp(36px, 4.6vw, 60px);
  background-image: var(--mark-light);
  background-repeat: no-repeat;
  background-position: right -90px top -110px;
  background-size: 300px auto;
}
.dossier-story .d-lead {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}
/* hairline shift from "who we are" to the mission paragraphs */
.dossier-story .d-rule {
  height: 1px;
  margin: 26px 0;
  border: 0;
  background: linear-gradient(90deg, var(--red) 0 34px, var(--line) 34px);
}
.dossier-story p {
  color: var(--muted);
  font-size: 15.5px;
  max-width: 62ch;
}
.dossier-story p + p {
  margin-top: 14px;
}
.dossier-story p span {
  color: var(--red);
  font-weight: 600;
}
/* ink tower — vision + animated stat bars */
.dossier-vision {
  padding: clamp(32px, 4vw, 52px) clamp(28px, 3.4vw, 46px);
  background-color: var(--ink);
  background-image: radial-gradient(
      460px 320px at 88% -4%,
      rgba(225, 0, 0, 0.22),
      transparent 62%
    ),
    var(--mark-white);
  background-repeat: no-repeat;
  background-position: 0 0, right -80px bottom -90px;
  background-size: auto, 300px auto;
}
.dossier-vision > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}
.dossier-vision > p span {
  color: var(--red-300);
  font-weight: 600;
}
.stat {
  margin-top: 18px;
}
.stat .stat-label {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: #fff;
  margin-bottom: 7px;
}
.stat .stat-label b {
  color: var(--red-300);
}
.stat-track {
  height: 6px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.stat-fill {
  height: 100%;
  border-radius: var(--pill);
  background: var(--grad-red);
  width: 0;
  transition: width 1.3s var(--ease);
}

/* image marquee (base: free-standing variant) */
.marquee {
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-track img {
  height: 220px;
  width: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
/* film-strip variant: embedded in the dossier's bottom edge — the
   slab's rounded corners crop it, photos butt seamlessly */
.dossier-strip {
  border-top: 1px solid var(--line-2);
}
.dossier-strip .marquee {
  margin: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.dossier-strip .marquee-track {
  gap: 0;
}
.dossier-strip .marquee-track img {
  height: 235px;
  border: 0;
  border-radius: 0;
}

/* ============================================================
   AGENT FORM
   ============================================================ */
.form-section {
  background-color: var(--bg-soft);
  background-image: var(--mark-light), var(--mark-light);
  background-repeat: no-repeat;
  background-position: left -140px top 110px, right -170px bottom 120px;
  background-size: 420px auto, 440px auto;
}
.form-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.form-body {
  padding: 44px;
}
.form-body .eyebrow {
  margin-bottom: 14px;
}
.form-body h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.form-body h2 .hl {
  color: var(--red);
}
.form-body .fdesc {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}
.agent-form-el {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.agent-form-el input,
.agent-form-el textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.agent-form-el textarea {
  min-height: 120px;
  resize: vertical;
}
.agent-form-el input::placeholder,
.agent-form-el textarea::placeholder {
  color: var(--muted-2);
}
.agent-form-el input:focus,
.agent-form-el textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(225, 0, 0, 0.1);
}
.agent-form-el input.invalid,
.agent-form-el textarea.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(225, 0, 0, 0.08);
}
.form-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-msg {
  font-size: 14px;
  font-weight: 600;
}
.form-msg.ok {
  color: #1a8f4c;
}
.form-msg.err {
  color: var(--red);
}
.form-aside {
  position: relative;
  background: var(--ink);
}
.form-aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.form-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(225, 0, 0, 0.12), rgba(20, 21, 26, 0.45));
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--ink);
  background-image: var(--mark-white);
  background-repeat: no-repeat;
  background-position: right -170px bottom -210px;
  background-size: 560px auto;
  color: rgba(255, 255, 255, 0.7);
  padding: 72px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 40px;
}
.site-footer h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.site-footer .f-brand img {
  /* original full-colour logo on a white plate (same treatment as the
     partner chips) — no invert filter, width:auto keeps the aspect */
  height: 60px;
  width: auto;
  padding: 11px 15px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
}
.site-footer .f-brand p {
  font-size: 14px;
  max-width: 320px;
}
.f-contact {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.f-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  transition: color 0.2s var(--ease);
}
.f-contact a i {
  color: var(--red-300);
  width: 16px;
}
.f-contact a:hover {
  color: #fff;
}
.f-social {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.f-social a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.25s var(--ease);
}
.f-social a:hover {
  background-color: var(--red);
  transform: translateY(-3px);
  border-color: transparent;
}
.f-links a {
  display: block;
  font-size: 14px;
  padding: 6px 0;
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.f-links a:hover {
  color: #fff;
  padding-left: 5px;
}
.f-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.f-partners a {
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  display: grid;
  place-items: center;
}
.f-partners img {
  height: 26px;
  width: auto;
  object-fit: contain;
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-2);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.has-js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes floaty {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -16px);
  }
}
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70%,
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  /* services mosaic: two columns — feature stays wide, "soon" cell
     drops to a single cell so the grid fills without holes */
  .services-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-soon {
    grid-column: span 1;
  }
  .soon-duo {
    grid-template-columns: 1fr;
  }
  /* earn grid: the two horizontal cards stack full-width, the
     three benefit cards keep a single row */
  .earn-wide,
  .earn-side {
    grid-column: span 12;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .hero-grid {
    gap: 32px;
  }
  /* collapse the desktop nav into the mobile menu early enough that the
     logo + links never get squeezed on small laptops/tablets */
  .nav-menu,
  .nav-actions,
  .top-bar .tb-left {
    display: none;
  }
  .hamburger {
    display: block;
    margin-left: auto;
  }
  .nav {
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* copy first, terminal below — the pinned sequence (see hero section)
     picks the device up when the user scrolls down to it */
  .hero-visual {
    min-height: 320px;
  }
  .tilt-3d {
    width: min(280px, 70%);
  }
  /* every earn card goes full-width horizontal on tablets */
  .earn-card {
    grid-column: span 12;
    flex-direction: row;
    align-items: center;
    gap: 26px;
  }
  .earn-card .earn-ico {
    margin: 10px;
  }
  .form-card {
    grid-template-columns: 1fr;
  }
  .form-aside {
    min-height: 220px;
    order: -1;
  }
  .dossier-body {
    grid-template-columns: 1fr;
  }
  .cta-band .container {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 64px 0;
  }
  .container {
    padding: 0 18px;
  }
  .services-panel {
    border-radius: 28px;
    padding: 38px 14px 14px;
  }
  .services-head {
    margin-bottom: 34px;
    padding: 0 8px;
  }
  .services-mosaic {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .svc-feature,
  .svc-soon {
    grid-column: auto;
  }
  .svc-card {
    padding: 26px 22px;
    min-height: 0;
  }
  .svc-tag {
    top: 22px;
    right: 22px;
  }
  /* keep the kicker clear of the absolute top-right tag */
  .svc-feature .svc-kicker {
    max-width: calc(100% - 118px);
  }
  .svc-feature .svc-name {
    font-size: 22px;
  }
  .earn-grid {
    gap: 14px;
  }
  .earn-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 26px 22px;
  }
  .earn-card .earn-ico {
    margin: 10px 0 28px 10px;
  }
  .dossier {
    border-radius: 28px;
  }
  .dossier-story,
  .dossier-vision {
    padding: 30px 22px;
  }
  .dossier-strip .marquee-track img {
    height: 170px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .form-body {
    padding: 28px 22px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 56px 0 72px;
  }
  /* emblem diamonds scale with the phone-width visual box */
  .hero-visual::before {
    width: min(270px, 78%);
    height: min(270px, 78%);
    border-radius: 28px;
  }
  .hero-visual::after {
    width: min(400px, 104%);
    height: min(400px, 104%);
    border-radius: 40px;
  }
  /* compact chips so all three clear the terminal and each other
     down to 320px-wide screens */
  .chip {
    padding: 10px 13px;
    gap: 8px;
    font-size: 12px;
  }
  .chip i {
    width: 26px;
    height: 26px;
  }
  .chip small {
    font-size: 10px;
  }
  .chip-1 {
    left: -2%;
  }
  .chip-2 {
    right: -2%;
    bottom: 18%;
  }
  .chip-3 {
    left: 4%;
    bottom: 2%;
  }
  .marquee-track img {
    height: 170px;
    width: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .has-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .stat-fill {
    transition: none;
  }
}