/* ==========================================================================
   Paynix — Home (VO Refined V1.5)
   Built on Bootstrap 5.3. Tokens mirror the Figma file.
   ========================================================================== */

/* ---------- Fonts (Manrope, self-hosted) ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/manrope-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #130710;
  --bg-deep: #050003;
  --bg-2: #0e070c;
  --plum: #792d5c;
  --plum-2: #782d5d;
  --pink: #e90097;
  --pink-2: #f25db5;
  --ink: #ffffff;
  --body: #b9aeb5;
  --muted: #8e828a;
  --cream: #e7e3d9;
  --line: rgba(255, 255, 255, .08);
  --card-grad: linear-gradient(180deg, #2f0e26 0%, #180714 100%);
  --card-line: rgba(233, 0, 151, .10);
  --chip-bg: #2d061f;
  --chip-line: #722454;
  --gutter: clamp(20px, 5.556vw, 80px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: hidden turns the body into a scroll container and breaks the orbit's sticky pin */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { flex: none; }
::selection { background: rgba(233, 0, 151, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--pink-2); outline-offset: 3px; border-radius: 6px; }

.container { max-width: 1440px; padding-inline: var(--gutter); }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 2000;
  background: var(--pink); color: #fff; padding: 10px 16px; border-radius: 999px;
}

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--pink);
}
.eyebrow--light { color: var(--pink-2); }
.eyebrow--wide { font-weight: 500; letter-spacing: .1em; margin-bottom: 20px; }

.h-section {
  margin: 0;
  font-size: clamp(36px, 3.9vw, 56px); font-weight: 300;
  line-height: 1.036; letter-spacing: .01em;
}
.h-section--tight { letter-spacing: -.035em; }
.lead-p {
  margin: 8px 0 0;
  font-size: 17px; line-height: 26px; letter-spacing: .015em; color: var(--body);
}
.lead-p--grey { color: #9e9e9e; margin-top: 16px; }
.lead-p--18 { font-size: 18px; line-height: 28px; letter-spacing: .01em; }

.h-card {
  margin: 0;
  font-size: clamp(30px, 2.8vw, 40px); font-weight: 300;
  line-height: 1.15; letter-spacing: -.005em;
}
.h-card--44 { font-size: clamp(32px, 3.06vw, 44px); line-height: 1.136; }
.h-card--32 { font-size: clamp(28px, 2.2vw, 32px); line-height: 1.19; }
.h-mini { margin: 0; font-size: 24px; font-weight: 500; line-height: 33px; }
.p-desc { margin: 0; font-size: 17px; line-height: 26px; letter-spacing: .01em; color: var(--body); }
.p-desc--sm { font-size: 14px; line-height: 21px; }
.p-desc--15 { font-size: 15px; line-height: 23px; }

/* ---------- Buttons ----------
   Every button fills with colour from the bottom up on hover (linear).
   The fill is a background-image so content never needs extra layering. */
.btn-primary-p, .btn-ghost, .btn-outline-p, .btn-nav-cta, .nav-login,
.card-cta span, .card-cta i, .icon-btn, .f-social a, .nav-burger {
  --fill: var(--pink);
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 0%;
  transition: background-size .45s linear, color .45s linear, border-color .45s linear,
              box-shadow .5s var(--ease-out), transform .5s var(--ease-out), height .4s var(--ease);
}
.btn-primary-p:hover, .btn-ghost:hover, .btn-outline-p:hover, .btn-nav-cta:hover, .nav-login:hover,
.card-cta:hover span, .card-cta:hover i, .icon-btn:hover, .f-social a:hover, .nav-burger:hover,
.btn-primary-p:focus-visible, .btn-ghost:focus-visible, .btn-outline-p:focus-visible, .btn-nav-cta:focus-visible {
  background-size: 100% 100%;
}

.btn-primary-p, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 36px; border-radius: 999px;
  font-size: 17px; font-weight: 600; line-height: 23px; letter-spacing: .01em;
  color: #fff; white-space: nowrap;
}
.btn-primary-p {
  --fill: var(--pink);
  background-color: var(--plum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.btn-primary-p:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 34px -12px rgba(233, 0, 151, .7); }
.btn-ghost {
  --fill: #ffffff;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.btn-ghost:hover { color: #1a0a15; border-color: #fff; }
.btn-ghost--glass { background-color: rgba(255, 255, 255, .02); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.btn-outline-p {
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 24px; border-radius: 100px;
  border: 1px solid var(--pink);
  font-size: 14px; font-weight: 500; line-height: 18px; color: #fff; white-space: nowrap;
}
.btn-outline-p--wide { padding: 0 40px; }
.btn-outline-p svg { width: 18px; height: 18px; color: currentColor; margin-right: -4px; transition: transform .5s var(--ease-out); }
.btn-outline-p:hover { color: #fff; box-shadow: 0 12px 30px -14px rgba(233, 0, 151, .8); }
.btn-outline-p:hover svg { transform: translate(3px, -3px); }

.icon-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background-color: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .10);
}
.icon-btn svg { width: 20px; height: 20px; color: #fff; opacity: .4; transition: opacity .45s linear, transform .5s var(--ease-out); }
.icon-btn:hover svg, .icon-btn--accent svg { opacity: 1; }
.icon-btn--accent { background-color: rgba(233, 0, 151, .20); border-color: #692651; }
.icon-btn:hover { border-color: var(--pink); }
[data-slider-next].icon-btn:hover svg { transform: translateX(3px); }
[data-slider-prev].icon-btn:hover svg { transform: translateX(-3px); }
.icon-btn[disabled] { opacity: .45; pointer-events: none; }

/* Card CTA: chip + round arrow */
.card-cta { display: inline-flex; align-items: center; }
.card-cta span {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border-radius: 999px; background-color: var(--chip-bg);
  border: 1px solid rgba(242, 93, 181, .35);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--pink-2);
}
.card-cta i {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background-color: var(--chip-bg); border: 1px solid var(--chip-line);
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
}
.card-cta i svg { width: 18px; height: 18px; color: var(--pink-2); transition: transform .6s var(--ease-out), color .45s linear; }
.card-cta:hover span { color: #fff; border-color: var(--pink); }
.card-cta:hover i { border-color: var(--pink); transition-delay: .08s; }
.card-cta:hover i svg { color: #fff; transform: rotate(45deg); }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(233, 0, 151, .14);
  font-size: 14px; font-weight: 600; line-height: 19px; letter-spacing: .01em; color: var(--pink-2);
}
.tag svg { width: 16px; height: 16px; color: var(--pink-2); }
.tag--sm { padding: 7px 14px 7px 10px; font-size: 13px; line-height: 18px; }
.tag--sm svg { width: 15px; height: 15px; }

/* Feature list */
.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feat li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; letter-spacing: .01em; color: var(--cream); }
.feat svg { width: 16px; height: 16px; color: var(--pink-2); }

/* Glass label */
.glass-label {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  background: rgba(20, 12, 18, .75);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap;
}
.glass-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink-2); box-shadow: 0 0 0 0 rgba(242, 93, 181, .6); animation: ping 2.4s var(--ease) infinite; }
.glass-label svg { width: 14px; height: 14px; color: var(--pink-2); }

/* ==========================================================================
   NAV — floating glass
   ========================================================================== */
.site-nav {
  position: fixed; inset: 16px 0 auto; z-index: 1030;
  padding-inline: var(--gutter);
  transition: transform .5s var(--ease-out), inset .4s var(--ease);
  pointer-events: none;
}
.nav-glass {
  pointer-events: auto;
  max-width: 1280px; height: 68px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 10px 10px 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(42, 16, 35, .34) 50%, rgba(121, 45, 92, .26));
  background-color: rgba(42, 16, 35, .22);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 16px 48px -8px rgba(5, 0, 3, .4);
  backdrop-filter: blur(6px) saturate(170%); -webkit-backdrop-filter: blur(6px) saturate(170%);
  transition: max-width .5s var(--ease-out), height .4s var(--ease), background-color .4s, box-shadow .4s;
}
.site-nav.is-scrolled { inset: 10px 0 auto; }
.site-nav.is-scrolled .nav-glass {
  max-width: 1080px; height: 60px;
  background-color: rgba(30, 10, 24, .42);
  backdrop-filter: blur(9px) saturate(170%); -webkit-backdrop-filter: blur(9px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 18px 50px -10px rgba(0, 0, 0, .6);
}
.site-nav.is-hidden { transform: translateY(-120%); }

.nav-logo img { width: 104px; height: auto; transition: width .4s var(--ease); }
.is-scrolled .nav-logo img { width: 92px; }

.nav-links { list-style: none; margin: 0; padding: 0; gap: 2px; align-items: center; }
.nav-links > li { position: relative; }
.nav-link-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 0; border-radius: 999px; background: transparent;
  font-size: 14px; font-weight: 500; line-height: 19px; color: rgba(255, 255, 255, .82);
  transition: background-color .25s, color .25s;
  cursor: pointer;
}
.nav-link-pill:hover, .nav-item-dd.open > .nav-link-pill { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-link-pill .chev { width: 12px; height: 12px; color: var(--pink-2); transition: transform .3s var(--ease); }
.nav-item-dd.open .chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 18px); left: 50%;
  width: 600px; padding: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  border-radius: 24px;
  background: linear-gradient(160deg, #3a1430 0%, #1f0a19 42%, #170712 100%);
  border: 1px solid rgba(242, 93, 181, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(0, 0, 0, .35), 0 30px 70px -12px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(233, 0, 151, .45);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98);
  transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility .25s;
}
.nav-menu--sm { width: 260px; grid-template-columns: 1fr; }
.nav-item-dd.open .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.nav-menu::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: #3a1430; border-left: 1px solid rgba(242, 93, 181, .28); border-top: 1px solid rgba(242, 93, 181, .28); border-radius: 3px 0 0 0; }
.nav-menu::after { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav-menu a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; transition: background-color .35s var(--ease), transform .45s var(--ease-out); }
.nav-menu a:hover { background: rgba(233, 0, 151, .14); transform: translateX(3px); }
.nav-item-dd.open .nav-menu a { animation: menuIn .5s var(--ease-out) both; }
.nav-item-dd.open .nav-menu a:nth-child(2) { animation-delay: .03s; } .nav-item-dd.open .nav-menu a:nth-child(3) { animation-delay: .06s; } .nav-item-dd.open .nav-menu a:nth-child(4) { animation-delay: .09s; } .nav-item-dd.open .nav-menu a:nth-child(5) { animation-delay: .12s; } .nav-item-dd.open .nav-menu a:nth-child(6) { animation-delay: .15s; } .nav-item-dd.open .nav-menu a:nth-child(7) { animation-delay: .18s; }
.nav-menu strong { display: block; font-size: 14px; font-weight: 500; color: #fff; }
.nav-menu small { display: block; font-size: 12.5px; color: var(--body); }
.menu-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(121, 45, 92, .6), rgba(42, 15, 34, .85));
  border: 1px solid rgba(255, 255, 255, .10);
}
.menu-ico svg { width: 18px; height: 18px; color: var(--pink-2); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-login { --fill: rgba(255, 255, 255, .12); padding: 12px 16px; font-size: 14px; font-weight: 500; border-radius: 999px; }
.nav-login:hover { color: #fff; }
.btn-nav-cta {
  align-items: center; gap: 8px;
  height: 52px; padding: 0 24px; border-radius: 100px;
  background-color: rgba(120, 45, 93, .30); border: 1px solid var(--plum-2);
  font-size: 14px; font-weight: 500; color: #fff;
}
.btn-nav-cta svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.btn-nav-cta:hover { color: #fff; border-color: var(--pink); box-shadow: 0 8px 24px -8px rgba(233, 0, 151, .7); }
.btn-nav-cta:hover svg { transform: translate(2px, -2px); }
.is-scrolled .btn-nav-cta { height: 44px; }

.nav-burger {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.nav-burger svg { width: 22px; height: 22px; color: #fff; }

.mobile-nav {
  --bs-offcanvas-width: min(360px, 88vw);
  background: rgba(14, 5, 11, .92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
  color: #fff;
}
.mobile-nav .offcanvas-header { padding: 20px 20px 8px; }
.mobile-nav .offcanvas-body { display: flex; flex-direction: column; padding: 8px 20px 28px; }
.mobile-nav .offcanvas-body > a { padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
.m-eyebrow { margin: 22px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-2); }
.m-actions { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero { background: var(--bg-deep); position: relative; min-height: max(640px, min(100vh, 900px)); height: 900px; max-height: 100svh; display: flex; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
.hero-ov { position: absolute; inset: 0; }
.hero-ov--plum { background: linear-gradient(90deg, rgba(121, 43, 92, .55) 0%, rgba(121, 43, 92, .22) 48%, rgba(115, 115, 115, 0) 100%); mix-blend-mode: normal; }
.hero-ov--left { background: linear-gradient(90deg, #090005 0%, rgba(10, 0, 6, .78) 38%, rgba(5, 0, 3, .10) 72%, rgba(5, 0, 3, 0) 100%); }
.hero-ov--bottom { background: linear-gradient(180deg, rgba(5, 0, 3, .58) 0%, rgba(5, 0, 3, 0) 23%, rgba(5, 0, 3, 0) 64%, rgba(5, 0, 3, .75) 100%); }

.hero-inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(150px, 28.9vh, 260px); }
.hero-copy { max-width: 880px; margin-bottom: auto; }
.hero-title {
  margin: 0 0 28px;
  font-size: clamp(40px, 4.45vw, 64px); font-weight: 500;
  line-height: 1.0625; letter-spacing: .01em;
}
.hero-sub { max-width: 520px; margin: 0 0 28px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; letter-spacing: .015em; color: var(--cream); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

.facts {
  list-style: none; margin: 48px 0 0; padding: 40px 0;
  display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.facts li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; line-height: 20px; color: rgba(255, 255, 255, .88); }
.facts svg { width: 18px; height: 18px; color: var(--pink-2); }

/* ==========================================================================
   02 ECOSYSTEM
   ========================================================================== */
.ecosystem { position: relative; height: clamp(360px, 58.4vw, 841px); overflow: hidden; background: #0b0309; }
.eco-media { position: absolute; inset: -6% 0; will-change: transform; }
.eco-media img { width: 100%; height: 100%; object-fit: cover; }
.eco-pulse {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 93, 181, .30), rgba(233, 0, 151, 0) 65%);
  mix-blend-mode: screen; animation: ecoPulse 5s ease-in-out infinite;
  pointer-events: none;
}
.ecosystem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(5, 0, 3, 0) 14%, rgba(19, 7, 16, 0) 86%, var(--bg) 100%); pointer-events: none; }

/* ==========================================================================
   Sections — shared
   ========================================================================== */
.section { position: relative; padding: 60px 0; }
.section--pb { padding-bottom: 80px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 48px; flex-wrap: wrap; }
.head { max-width: 965px; flex: 1 1 520px; }
.head--md { max-width: 760px; }
.head--lg { max-width: 864px; }
.head--xl { max-width: 1125px; }
.head .h-section + .lead-p { margin-top: 8px; }
.head-controls { display: flex; align-items: center; gap: 16px; }
.slider-btns { display: flex; gap: 8px; }

/* Horizontal tracks */
.track-wrap { padding-left: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.track {
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 0;
  padding-right: var(--gutter); padding-bottom: 4px;
  scrollbar-width: none; cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.track.is-dragging * { pointer-events: none; user-select: none; }
.track > * { scroll-snap-align: start; flex: none; }

/* ==========================================================================
   06 INDUSTRIES
   ========================================================================== */
.industry {
  position: relative; width: 301px; height: 420px; border-radius: 12px; overflow: hidden;
  background: var(--bg-2); border: 1px solid rgba(255, 255, 255, .06);
  isolation: isolate;
}
.industry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); z-index: -2; }
.industry::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 0, 3, 0) 45%, rgba(5, 0, 3, .92) 100%); }
.industry::after {
  content: ""; position: absolute; left: 8px; top: 290px; width: 342px; height: 232px; z-index: -1;
  background: radial-gradient(closest-side, rgba(233, 0, 151, .55), rgba(233, 0, 151, 0));
  opacity: .5; filter: blur(30px); transition: opacity .6s var(--ease);
}
.industry:hover img { transform: scale(1.06); }
.industry:hover::after { opacity: .9; }
.industry-txt { position: absolute; left: 24px; right: 24px; top: 320px; transition: transform .5s var(--ease-out); }
.industry:hover .industry-txt { transform: translateY(-4px); }
.industry h3 { margin: 0 0 6px; font-size: 22px; font-weight: 500; line-height: 30px; letter-spacing: .01em; }
.industry p { margin: 0; max-width: 250px; font-size: 14px; line-height: 20px; letter-spacing: .015em; color: rgba(231, 227, 217, .85); }

/* ==========================================================================
   Product cards
   ========================================================================== */
.p-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--card-grad);
  border: 1px solid var(--card-line); border-radius: 16px;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.p-card:hover { border-color: rgba(233, 0, 151, .26); }
.p-card--tall { height: 700px; }
.p-copy { position: relative; z-index: 2; padding: 40px; display: flex; flex-direction: column; gap: 24px; max-width: 500px; }
.p-copy .h-card { margin-top: 0; }
.p-art { position: absolute; z-index: 1; height: auto; transition: transform .8s var(--ease-out); }
.p-art--stand { left: 35%; bottom: 10px; width: 27%; max-width: 171px; z-index: 2; }
.p-card:hover .p-art { transform: translateY(-6px); }
.p-card .card-cta { position: absolute; right: 24px; bottom: 24px; z-index: 3; }
.p-card .card-cta--static { position: static; }

/* ePOS */
.epos-card { min-height: 600px; display: flex; margin-bottom: 16px; }
.epos-copy { padding: 56px; gap: 20px; max-width: 552px; }
.epos-copy .tag { margin-bottom: 4px; }
.epos-copy .h-card { margin-bottom: 4px; }
.epos-copy .p-desc { margin-bottom: 12px; max-width: 440px; }
.epos-copy .card-cta { margin-top: auto; padding-top: 32px; }
.epos-art { position: absolute; left: 39.92%; right: 2.97%; top: 17px; aspect-ratio: 731 / 583; }
.epos-t3 { position: absolute; left: 24.1%; top: 0; width: 61.4%; transition: transform 1s var(--ease-out); }
.epos-group { position: absolute; left: 3%; top: 20.6%; width: 96.6%; transition: transform 1s var(--ease-out); }
.epos-card:hover .epos-t3 { transform: translateY(-6px); }
.epos-card:hover .epos-group { transform: translateY(-3px); }

/* Mini cards */
.mini-card { height: 272px; display: flex; gap: 32px; padding: 16px; }
.mini-img { flex: 0 0 260px; height: 100%; border-radius: 8px; overflow: hidden; background: #140a11; }
.mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.mini-card:hover .mini-img img { transform: scale(1.05); }
.mini-copy { display: flex; flex-direction: column; gap: 16px; padding-top: 0; max-width: 288px; }
.mini-copy .tag { margin-bottom: 0; }
.mini-copy .h-mini { margin-bottom: -8px; }
.mini-copy .card-cta { margin-top: auto; }

/* Kiosk */
.kiosk-card { height: 560px; display: flex; }
.kiosk-copy { max-width: 340px; height: 100%; }
.kiosk-copy .h-card { margin-bottom: -8px; }
.kiosk-img { position: absolute; left: 60.3%; top: 40px; width: 185px; height: auto; z-index: 1; }

/* ==========================================================================
   10 HOW TO GET STARTED
   ========================================================================== */
.how { background: linear-gradient(180deg, var(--bg) 0%, #000 160px, #000 100%); padding: 96px 0 128px; overflow: hidden; }
.how-glow { position: absolute; left: 50%; bottom: -300px; width: 1100px; height: 600px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 0, 151, .34), rgba(233, 0, 151, .12) 55%, rgba(233, 0, 151, 0)); pointer-events: none; }
.how-head { max-width: 820px; margin: 0 auto 56px; }
.h-display { margin: 0; font-size: clamp(36px, 3.9vw, 56px); font-weight: 300; line-height: 1.214; letter-spacing: -.035em; }
.h-display span { font-weight: 300; }
.h-display b { font-weight: 600; background: linear-gradient(90deg, #fff, var(--pink-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 1248px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.steps-line {
  position: absolute; left: 16.67%; right: 16.67%; top: 36px; height: 1px; z-index: 0;
  background: rgba(242, 93, 181, .45);
  transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-out) .3s;
}
.steps.is-in .steps-line { transform: scaleX(1); }
.step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.step-num {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 24px;
  font-size: 18px; font-weight: 500;
  background: rgba(20, 12, 18, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: background-color .5s, box-shadow .5s, transform .5s var(--ease-out);
}
.step--active .step-num, .step:hover .step-num { background: rgba(209, 0, 138, .5); border-color: transparent; box-shadow: 0 0 32px rgba(233, 0, 151, .55); }
.step:hover .step-num { transform: translateY(-4px); }
.step h3 { margin: 0 0 10px; font-size: 24px; font-weight: 500; line-height: 33px; letter-spacing: -.015em; }
.step p { margin: 0; max-width: 320px; font-size: 15px; line-height: 23px; color: var(--body); }

/* ==========================================================================
   11 FINAL CTA
   ========================================================================== */
.final-cta { position: relative; height: 780px; display: flex; align-items: center; overflow: hidden; background: #000; isolation: isolate; }
/* Seam with the steps section: same black, same glow continuing across the edge */
.final-cta::before { content: ""; position: absolute; left: 50%; top: -300px; width: 1100px; height: 600px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 0, 151, .34), rgba(233, 0, 151, .12) 55%, rgba(233, 0, 151, 0)); z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.final-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 10%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 78%, var(--bg) 100%); }
.final-cta > .container { z-index: 3; }
.final-bg { position: absolute; inset: -4% 0; will-change: transform; z-index: 0; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.h-cta { margin: 0 auto 32px; max-width: 640px; font-size: clamp(42px, 5vw, 72px); font-weight: 300; line-height: 1.083; letter-spacing: -.04em; }

/* ==========================================================================
   10b TESTIMONIALS
   ========================================================================== */
.stories { padding: 80px 0; }
.counter { display: flex; align-items: baseline; gap: 4px; }
.counter b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.counter span { font-size: 14px; color: var(--muted); }
.counter i { font-style: normal; }
.v-rule { width: 1px; height: 28px; background: rgba(255, 255, 255, .12); }
.track--stories { gap: 16px; }
.story {
  position: relative; width: 420px; height: 500px; padding: 16px;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--card-grad); border: 1px solid var(--card-line); border-radius: 16px;
  transition: border-color .5s, opacity .5s, transform .6s var(--ease-out);
}
.story--featured { width: 880px; flex-direction: row; gap: 48px; }
.story-photo { position: relative; flex: 0 0 360px; height: 468px; border-radius: 12px; overflow: hidden; background: #140a11; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.story:hover .story-photo img { transform: scale(1.04); }
.story-photo--short { flex: none; height: 190px; }
.glass-label--caption { left: 14px; bottom: 14px; height: 34px; padding: 0 14px 0 10px; gap: 8px; }
.story-body { display: flex; flex-direction: column; padding: 13px 0 26px; flex: 1; min-width: 0; }
.story-body--sm { padding: 0 16px 21px; }
.quote-mark { font-size: 96px; font-weight: 600; line-height: 60px; height: 60px; color: rgba(242, 93, 181, .20); margin-bottom: 24px; }
.stars { display: flex; gap: 3px; }
.stars svg { width: 16px; height: 16px; color: var(--pink-2); }
.story-top { display: flex; justify-content: space-between; align-items: center; }
.chip-prod { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(233, 0, 151, .14); border: 1px solid rgba(242, 93, 181, .3); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--pink-2); }
.chip-prod i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink-2); }
.story blockquote { margin: 16px 0 0; font-size: 17px; line-height: 26px; color: #dcdcdc; }
.story--featured blockquote { margin-top: 24px; font-size: 26px; font-weight: 300; line-height: 36px; }
.story hr { margin: auto 0 0; border: 0; height: 1px; background: rgba(255, 255, 255, .10); opacity: 1; }
.author { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.story-body--sm .author { margin-top: 24px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--plum); font-size: 15px; font-weight: 600; flex: none; }
.avatar--green { background: #3a7d5c; }
.author b { display: block; font-size: 16px; font-weight: 600; line-height: 22px; }
.author small { display: block; font-size: 13px; line-height: 18px; letter-spacing: .01em; color: var(--body); }
.progress-bars { display: flex; justify-content: center; gap: 6px; margin-top: 55px; }
.progress-bars button { position: relative; width: 28px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; cursor: pointer; transition: width .5s var(--ease-out); }
.progress-bars button.active { width: 64px; }
.progress-bars button i { position: absolute; inset: 0; background: var(--pink); transform-origin: left; transform: scaleX(0); }
.progress-bars button.done i { transform: scaleX(1); }
.progress-bars button.active i { animation: fillBar var(--dur, 6s) linear forwards; }
.stories.is-paused .progress-bars button.active i { animation-play-state: paused; }

/* ==========================================================================
   08 WHY PAYNIX
   ========================================================================== */
.why { padding: 80px 0; }
.why .head-row { margin-bottom: 48px; }
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.reason {
  padding: 24px; border-radius: 8px; background: rgba(46, 6, 33, .5);
  display: flex; flex-direction: column; gap: 16px; min-height: 193px;
  transition: background-color .4s, transform .5s var(--ease-out);
}
.reason:hover { background: rgba(70, 10, 50, .6); }
.r-ico { height: 40px; display: flex; align-items: center; }
.r-ico svg { width: 20px; height: 20px; color: var(--pink-2); transition: transform .5s var(--ease-out); }
.reason:hover .r-ico svg { transform: scale(1.15) rotate(-6deg); }
.reason h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 27px; letter-spacing: -.01em; }
.reason p { margin: 0; max-width: 244px; font-size: 15px; line-height: 23px; color: var(--body); }
.security {
  margin-top: 8px; padding: 16px 32px; border-radius: 8px; background: rgba(46, 6, 33, .5);
  display: flex; align-items: center; gap: 24px 86px; flex-wrap: wrap;
}
.sec-lead { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 72px; background: #330d27; font-size: 15px; font-weight: 600; }
.sec-lead svg { width: 18px; height: 18px; color: var(--pink-2); }
.security ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.security li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #e2e2e2; }
.security li svg { width: 16px; height: 16px; color: #e2e2e2; }

/* ==========================================================================
   09b TRUSTED BY
   ========================================================================== */
.trusted { position: relative; height: 200px; overflow: hidden; }
.trusted-label { position: absolute; left: 0; right: 0; top: 52px; margin: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.trusted-sheen { position: absolute; top: 99px; left: 0; width: 1280px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); opacity: 0; }
.marquee { position: absolute; top: 108px; left: 0; right: 0; overflow: hidden; }
.marquee-track { display: flex; gap: 88px; width: max-content; animation: marquee 38s linear infinite; }
.trusted:hover .marquee-track { animation-play-state: paused; }
.logo-ph { display: inline-flex; align-items: center; gap: 10px; height: 33px; font-size: 22px; letter-spacing: -.01em; color: #fff; opacity: .55; white-space: nowrap; transition: opacity .3s; }
.logo-ph:hover { opacity: .9; }
.logo-ph svg { width: 28px; height: 28px; }
.logo-ph.caps { letter-spacing: .08em; }
.logo-ph.lg { font-size: 24px; }
.logo-ph.sm { font-size: 18px; }
.w300 { font-weight: 300; } .w400 { font-weight: 400; } .w500 { font-weight: 500; } .w600 { font-weight: 600; } .w700 { font-weight: 700; }
.edge { position: absolute; top: 0; bottom: 0; width: 230px; pointer-events: none; z-index: 2; }
.edge--l { left: 0; background: linear-gradient(90deg, #130710, rgba(5, 0, 3, 0)); }
.edge--r { right: 0; background: linear-gradient(270deg, #130710, rgba(5, 0, 3, 0)); }

/* ==========================================================================
   09 SUPPORT & FAQ
   ========================================================================== */
.faq-sec { padding: 80px 0; overflow: hidden; }
.faq-glow { position: absolute; left: -15%; right: -15%; top: 87%; height: 715px; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 0, 151, .28), rgba(233, 0, 151, 0)); filter: blur(60px); pointer-events: none; }
.faq-sub { margin: 20px 0 0; font-size: 20px; font-weight: 300; line-height: 30px; color: var(--body); }
.support-card {
  margin-top: 40px; padding: 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid; gap: 4px; max-width: 400px;
}
.contact { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; transition: background-color .3s; }
a.contact:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.c-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(233, 0, 151, .12); flex: none; transition: background-color .3s; }
a.contact:hover .c-ico { background: rgba(233, 0, 151, .25); }
.c-ico svg { width: 18px; height: 18px; color: var(--pink-2); }
.contact small { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.contact b { display: block; font-size: 15px; font-weight: 500; line-height: 20px; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0; border: 0; background: none; text-align: left;
  font-size: 20px; font-weight: 500; line-height: 27px; letter-spacing: -.01em; color: #fff;
  transition: color .3s, padding .4s var(--ease);
}
.faq-q:not(.collapsed) { padding-top: 40px; padding-bottom: 14px; }
.faq-q:hover { color: var(--pink-2); }
.faq-t {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color .35s, border-color .35s, transform .45s var(--ease-out);
}
.faq-t svg { width: 16px; height: 16px; color: #fff; }
.faq-t .v { transform-origin: 8px 8px; transition: transform .4s var(--ease-out), opacity .3s; }
.faq-q:not(.collapsed) .faq-t { background: var(--chip-bg); border-color: var(--chip-line); transform: rotate(180deg); }
.faq-q:not(.collapsed) .faq-t .v { transform: scaleY(0); opacity: 0; }
.faq-a { margin: 0; padding: 0 0 28px; max-width: 620px; font-size: 16px; line-height: 26px; color: var(--body); }
.collapsing { transition: height .4s var(--ease); }

/* ==========================================================================
   12 FOOTER
   ========================================================================== */
.footer { position: relative; overflow: hidden; background: var(--bg-deep); padding-top: 104px; }
.footer-halftone { position: absolute; top: -6px; left: -4px; width: 113%; max-width: none; height: 630px; object-fit: cover; object-position: left top; pointer-events: none; }
.footer-glow { position: absolute; left: 0; right: 0; bottom: -40px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 0, 151, .42), rgba(42, 0, 24, .55) 42%, rgba(5, 0, 3, 0) 74%); filter: blur(48px); pointer-events: none; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; padding-bottom: 80px; flex-wrap: wrap; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 150px); column-gap: 135px; row-gap: 40px; }
.f-col { display: flex; flex-direction: column; gap: 14px; }
.f-col h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; line-height: 15px; letter-spacing: .1em; text-transform: uppercase; color: #f24cb7; }
.f-col a { font-size: 15px; line-height: 22px; color: #f0f0f0; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .3s, background-size .4s var(--ease-out); }
.f-col a:hover { color: #fff; background-size: 100% 1px; }
.f-join { width: 142px; }
.qr-card { width: 140px; height: 140px; padding: 8px; border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(121, 45, 92, .18)); transition: transform .5s var(--ease-out), box-shadow .5s; }
.qr-card img { width: 124px; height: 124px; border-radius: 4px; background: #3a1430; padding: 7px; }
.qr-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 20px 40px -20px rgba(233, 0, 151, .6); }
.footer-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .12);
}
.f-copy { font-size: 13px; color: var(--muted); }
.f-legal { max-width: 400px; font-size: 12px; line-height: 19px; text-align: center; color: var(--muted); }
.f-social { display: flex; gap: 12px; }
.f-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(154, 142, 150, .7); background-image: none; transition: border-color .3s, transform .35s var(--ease-out); }
.f-social svg { width: 24px; height: 24px; }
.f-social a:hover,
.f-social a:focus-visible { background-image: none; background-size: auto; border-color: var(--pink); transform: translateY(-3px); }
.wordmark { display: block; width: 100%; height: auto; margin-top: 16px; margin-bottom: -4.2%; opacity: 1; }

/* ==========================================================================
   Motion
   ========================================================================== */
.anim-load { opacity: 0; transform: translateY(18px); animation: rise 1s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.wordmark-wrap.is-in .wordmark { transform: none; opacity: 1; }
.float-slow { animation: float 7s ease-in-out infinite; }
.float-slower { animation: float 9s ease-in-out infinite reverse; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes heroZoom { to { transform: scale(1); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes marquee { to { transform: translateX(calc(-50% - 44px)); } }
@keyframes fillBar { to { transform: scaleX(1); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(242, 93, 181, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(242, 93, 181, 0); } }
@keyframes ecoPulse { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .anim-load, .reveal { opacity: 1; transform: none; }
  .wordmark { transform: none; opacity: 1; }
  .marquee-track { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1399.98px) {
  .footer-cols { column-gap: 72px; }
  .kiosk-img { left: auto; right: 9%; }
}

@media (max-width: 1199.98px) {
  .epos-copy { max-width: 46%; padding: 48px 40px; }
  .epos-art { left: 44%; right: 2%; top: auto; bottom: 24px; }
  .mini-card { gap: 24px; }
  .mini-img { flex-basis: 44%; }
  .footer-cols { grid-template-columns: repeat(4, minmax(120px, 1fr)); column-gap: 40px; }
  .security { gap: 16px 32px; }
}

@media (max-width: 991.98px) {
  .site-nav { inset: 12px 0 auto; }
  .nav-glass { height: 60px; padding-left: 20px; }
  .site-nav.is-scrolled .nav-glass { max-width: 1280px; }
  .hero { height: auto; min-height: 100svh; max-height: none; }
  .hero-inner { padding-top: 160px; }
  .hero-copy { margin-bottom: 0; }
  .facts { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; padding: 28px 0 32px; }
  .p-card--tall { height: auto; min-height: 640px; }
  .p-copy { padding: 32px; max-width: none; }
  .epos-card { flex-direction: column; min-height: 0; }
  .epos-copy { max-width: none; padding: 32px; }
  .epos-copy .card-cta { padding-top: 12px; }
  .epos-art { position: relative; left: auto; right: auto; bottom: auto; width: calc(100% - 32px); margin: 0 auto 24px; }
  .kiosk-card { height: auto; min-height: 560px; }
  .kiosk-copy { max-width: 58%; }
  .kiosk-img { right: 6%; }
  .steps { grid-template-columns: 1fr; gap: 40px; max-width: 420px; }
  .steps-line { display: none; }
  .final-cta { height: 640px; }
  .final-bg img { object-position: 40% center; opacity: .65; }
  .story--featured { width: min(880px, 86vw); }
  .reasons { grid-template-columns: 1fr 1fr; }
  .security ul { justify-content: flex-start; }
  .footer-top { flex-direction: column; }
  .wordmark { margin-top: 12px; }
}

@media (max-width: 767.98px) {
  .section { padding: 56px 0; }
  .head-row { margin-bottom: 32px; }
  .head-controls { width: 100%; justify-content: space-between; }
  .industry { width: 78vw; max-width: 301px; height: 400px; }
  .industry-txt { top: auto; bottom: 24px; }
  .p-card--tall { min-height: 0; padding-bottom: 300px; }
  .p-card--tall .p-art { width: 62% !important; }
  .p-card--tall .card-cta { position: relative; right: auto; bottom: auto; margin: -8px 32px 0; }
  .hero-ov--bottom { background: linear-gradient(180deg, rgba(5, 0, 3, .55) 0%, rgba(5, 0, 3, .62) 45%, rgba(5, 0, 3, .9) 100%); }
  .hero-img { object-position: 78% center; }
  .security { flex-direction: column; align-items: flex-start; }
  .security ul { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .p-art--stand { width: 34%; left: 52%; }
  .mini-card { height: auto; flex-direction: column; }
  .mini-img { flex-basis: auto; height: 220px; }
  .mini-copy { max-width: none; }
  .mini-copy .card-cta { margin-top: 8px; }
  .kiosk-card { flex-direction: column; min-height: 0; padding-bottom: 0; }
  .kiosk-copy { max-width: none; height: auto; }
  .kiosk-copy .card-cta { margin-top: 8px !important; }
  .kiosk-img { position: relative; left: auto; right: auto; top: auto; margin: 0 auto -60px; width: 160px; }
  .how { padding: 64px 0 88px; }
  .story, .story--featured { width: 86vw; }
  .story { height: auto; min-height: 500px; }
  .story--featured { flex-direction: column; gap: 20px; }
  .story-photo { flex: none; height: 260px; }
  .story--featured blockquote { font-size: 20px; line-height: 30px; }
  .quote-mark { display: none; }
  .story-body { padding: 0 8px 12px; }
  .reasons { grid-template-columns: 1fr; }
  .reason { min-height: 0; }
  .security { padding: 16px; }
  .security ul { gap: 12px 20px; }
  .trusted-label { top: 44px; }
  .edge { width: 80px; }
  .faq-q { font-size: 18px; }
  .footer { padding-top: 72px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
  .f-legal { text-align: left; }
}

@media (max-width: 575.98px) {
  .facts { grid-template-columns: 1fr; gap: 14px; }
  .hero-ctas > a { flex: 1 1 auto; }
  .btn-primary-p, .btn-ghost { padding: 15px 28px; font-size: 16px; }
  .epos-art { width: 100%; }
  .glass-label { transform: scale(.9); transform-origin: left top; }
}


/* ==========================================================================
   v2 additions — trusted brands, spotlight, line reveals, scroll progress
   ========================================================================== */

/* Trusted-by demo brands (all white) */
.marquee-track { gap: 72px; align-items: center; }
@keyframes marquee { to { transform: translateX(calc(-50% - 36px)); } }
.brand {
  display: inline-flex; align-items: center; gap: 10px; height: 36px;
  color: #fff; opacity: .7; white-space: nowrap;
  font-size: 21px; font-weight: 600; letter-spacing: -.01em;
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.brand svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brand:hover { opacity: 1; transform: translateY(-2px); }
.brand--serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 23px; letter-spacing: 0; }
.brand--serif em { font-style: italic; }
.brand--caps { font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.brand--tight { letter-spacing: .06em; font-weight: 700; font-size: 17px; }
.brand--wide { letter-spacing: .3em; font-weight: 500; font-size: 14px; }
.brand--bold { font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.brand--bold .amp { font-family: Georgia, serif; font-style: italic; font-weight: 400; margin: 0 2px; }
.brand--light { font-weight: 300; font-size: 24px; letter-spacing: -.02em; }
.brand--bold-lc { font-weight: 700; font-size: 23px; letter-spacing: -.04em; }

/* Pointer spotlight on cards (position set by JS) */
.spot { --mx: 50%; --my: 50%; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242, 93, 181, .10), rgba(242, 93, 181, 0) 60%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.spot:hover::before { opacity: 1; }
.reason, .story { position: relative; }
.reason > *, .story > * { position: relative; z-index: 1; }

/* Headline line reveal (lines wrapped by JS) */
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: block; transform: translateY(110%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * .09s + var(--d, 0s)); }
.is-in .line > span, .line-wrap.is-in .line > span { transform: none; }
.hero-title .line > span { transition: none; animation: lineUp 1.2s var(--ease-out) both; animation-delay: calc(.25s + var(--i, 0) * .11s); }
.hero-title.anim-load { opacity: 1; transform: none; animation: none; }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: none; } }

/* Scroll progress */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 1040; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--plum), var(--pink), var(--pink-2)); pointer-events: none; }

/* Softer, longer easing on interactive surfaces */
.industry, .p-card, .story, .reason {
  transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s),
              translate .8s var(--ease-out), border-color .6s var(--ease), background-color .6s var(--ease), box-shadow .8s var(--ease);
}
.p-card:hover, .story:hover, .reason:hover { translate: 0 -4px; transform: none; }
.reason:hover { transform: none; }
.industry:hover { translate: 0 -6px; border-color: rgba(242, 93, 181, .35); box-shadow: 0 30px 60px -30px rgba(233, 0, 151, .5); }
.mini-card > * { position: relative; z-index: 1; }

@keyframes menuIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .line > span, .hero-title .line > span { transform: none !important; animation: none !important; }
  .scroll-progress { display: none; }
}
@media (max-width: 767.98px) {
  .marquee-track { gap: 48px; }
  @keyframes marquee { to { transform: translateX(calc(-50% - 24px)); } }
  .brand { transform: scale(.88); }
}