/* ==========================================================================
   PAYMITRAA — core stylesheet
   Design tokens, base typography, header, hero and the shared page sections.
   Layout proportions are informed by the design reference; every colour,
   word, asset and link is Paymitraa's own.
   ========================================================================== */

/* ---------- Icon font (original theme fontello set) ---------- */
@font-face {
  font-family: 'rt-fontello';
  src: url('../assets/fonts/rt-fontello.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-rt"], [class*=" icon-rt"] { line-height: 1; }
[class^="icon-rt"]:before, [class*=" icon-rt"]:before {
  font-family: "rt-fontello";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-rt-calender-4:before{content:"\e841"}
.icon-rt-comments:before{content:"\e86b"}
.icon-rt-communication-service-alt:before{content:"\e877"}
.icon-rt-correct:before{content:"\e879"}
.icon-rt-development-service:before{content:"\e87d"}
.icon-rt-digital-art:before{content:"\e87c"}
.icon-rt-email:before{content:"\e815"}
.icon-rt-location-4:before{content:"\e810"}
.icon-rt-percentage:before{content:"\e883"}
.icon-rt-phone-2:before{content:"\e836"}
.icon-rt-quote-2:before{content:"\e862"}
.icon-rt-right-arrow:before{content:"\e858"}
.icon-rt-search:before{content:"\e80c"}
.icon-rt-secure-data-service:before{content:"\e865"}
.icon-rt-star:before{content:"\e838"}
.icon-rt-tax-service:before{content:"\e868"}
.icon-rt-trust-badge:before{content:"\e84f"}
.icon-rt-up-angle-bar:before{content:"\e807"}
.icon-rt-user-1:before{content:"\e811"}

.icon-rt-facebook:before {
  content: "\f09a";
}

.icon-rt-instagram:before {
  content: "\f16d";
}

.icon-rt-youtube:before {
  content: "\f16a";
}

.icon-rt-linkedin:before {
  content: "\f0e1";
}

/* ==========================================================================
   PAYMITRAA DESIGN SYSTEM  —  single source of truth for the whole site
   Brand:  primary #1F7EEA   secondary #FAB32E   dark/text #15202A   #FFFFFF
   Every other value below is a tint/shade of those four (plus neutrals), so
   any new page inherits the brand simply by using these variables.
   ========================================================================== */
:root {
  /* ---- brand: primary (blue) — identity, CTAs, active states ---- */
  --pm-primary:        #1f7eea;
  --pm-primary-hover:  #1a6ed2;   /* solid fills behind white text (4.99:1) */
  --pm-primary-active: #1560b8;   /* pressed / deep brand surface */
  --pm-primary-text:   #1560b8;   /* small text + links on light (6.2:1 on #fff) */
  --pm-primary-soft:   #eef4fd;   /* tinted card + section surface */
  --pm-primary-faint:  #f6f9fe;   /* subtlest wash */
  --pm-on-dark:        #6fb0f5;   /* blue text on dark (7.2:1 on --pm-dark) */

  /* ---- brand: secondary (yellow) — controlled accent only ---- */
  --pm-secondary:       #e19839;
  --pm-secondary-hover: #e7b23e;
  --pm-secondary-soft:  #fff6e4;  /* tinted accent surface */
  --pm-secondary-line:  #f6d38c;  /* accent border */
  --pm-secondary-ink:   #8a5b00;  /* accent text on light (5.2:1 on #fff) */

  /* ---- dark / text ---- */
  --pm-dark:      #15202a;        /* dark surfaces + headings */
  --pm-dark-deep: #0e1720;        /* deepest surface */
  --pm-dark-soft: #1e2b38;        /* raised dark surface */

  /* ---- neutrals ---- */
  --pm-white:    #ffffff;
  --pm-surface:  #ffffff;
  --pm-body:     #5e6f7c;         /* body copy */
  --pm-muted:    #8fa3b2;         /* meta text */
  --pm-on-dark-body: #c9d8e6;     /* body copy on dark */
  --pm-border:   #dfe7ef;
  --pm-surface-mute: #edf1f5;     /* recessive neutral fill (map neighbour) */
  --pm-border-dark: rgba(255, 255, 255, .16);
  --pm-disabled-bg:   #f2f5f8;    /* neutral, not the old green-grey */
  --pm-disabled-text: #63707c;    /* 4.5:1 on --pm-disabled-bg */
  --pm-on-brand-body: #eaf2fc;    /* body copy on a brand-blue band */

  /* ---- typography ---- */
  --pm-font: Arial, sans-serif;
  --pm-h1: 58px;   --pm-h1-lh: 70px;
  --pm-h2: 40px;   --pm-h2-lh: 48px;
  --pm-h2-sm: 32px; --pm-h2-sm-lh: 40px;   /* headings inside panels/cards */
  --pm-h3: 22px;   --pm-h3-lh: 30px;
  --pm-h4: 18px;   --pm-h4-lh: 26px;
  --pm-body-size: 16px; --pm-body-lh: 28px;
  --pm-small: 15px;     --pm-small-lh: 24px;
  --pm-eyebrow: 14px;   --pm-eyebrow-ls: .96px;

  /* ---- spacing / radius / shadow ---- */
  --pm-section: 100px;
  --pm-gutter: 12px;
  --pm-radius-sm: 8px;
  --pm-radius: 16px;
  --pm-radius-lg: 20px;
  --pm-radius-pill: 999px;
  --pm-shadow-sm: 0 6px 18px rgba(21, 32, 42, .06);
  --pm-shadow:    0 18px 44px rgba(21, 32, 42, .10);
  --pm-shadow-lg: 0 26px 60px rgba(21, 32, 42, .14);
  --pm-ring: 0 0 0 4px rgba(31, 126, 234, .16);

  /* ---- header (two-level: topbar + main row) ---- */
  --pm-topbar-h: 46px;
  --pm-header-h: 84px;
  --pm-header-total: calc(var(--pm-topbar-h) + var(--pm-header-h));
  --pm-header-line: var(--pm-border);

  /* ---- motion (one animation language site-wide) ---- */
  --pm-ease: cubic-bezier(.22, .61, .36, 1);
  --pm-fast: .2s;
  --pm-base: .3s;
  --pm-slow: .6s;

  /* ---- breakpoints (reference) ---- */
  --pm-bp-lg: 1200px; --pm-bp-md: 1024px; --pm-bp-sm: 767px; --pm-bp-xs: 576px;

  /* ======================================================================
     Compatibility layer — existing component rules read these names.
     They now resolve to the Paymitraa brand tokens above.
     ====================================================================== */
  --rt-primary-color:    var(--pm-primary);
  --rt-secondary-color:  var(--pm-dark);
  --rt-tertiary-color:   var(--pm-primary);
  --rt-title-color:      var(--pm-dark);
  --rt-body-color:       var(--pm-body);
  --rt-button-color:     #ffffff;
  --rt-button-text-color:#ffffff;
  --rt-border-color:     var(--pm-border);
  --rt-meta-light:       var(--pm-muted);
  --rt-gray20:           var(--pm-primary-soft);
  --rt-body-bg-color:    var(--pm-surface);
  --rt-container-width:  1364px;
  --rt-heading-font:     var(--pm-font);
  --rt-body-font:        var(--pm-font);
  --rt-header-height:    var(--pm-header-h);
  --rt-section-space:    var(--pm-section);
  --rt-col-gutter:       var(--pm-gutter);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--rt-body-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: var(--rt-body-color);
  background: var(--rt-body-bg-color);
  /* long unbreakable strings (URLs, slash-joined terms) must not widen the page */
  overflow-wrap: break-word;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--rt-heading-font); color: var(--rt-title-color); }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

/* ---------- Layout ----------
   The reference container is exactly 1364px with NO padding of its own;
   the 12px gutter lives on each column. Mirrored here.                     */
.container {
  width: 100%;
  max-width: var(--rt-container-width);
  margin: 0 auto;
}
/* every direct content block carries the column gutter */
.header-inner, .hero-copy, .hero-media, .section-head, .feature-grid,
.efficient-media, .efficient-copy, .spotlight-copy, .service-grid,
.split-media, .split-copy, .stats-title, .stats-grid,
.testimonials-copy, .brands-inner, .blog-slider, .cta-grid {
  padding-left: var(--rt-col-gutter);
  padding-right: var(--rt-col-gutter);
}

/* ---------- Shared typography ---------- */
.sub-title {
  display: block;
  font-size: 14px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--pm-primary-text);
}
.sub-title.sub-light  { color: var(--pm-on-dark-body); }
.sub-title.sub-yellow { color: var(--pm-secondary); }   /* accent eyebrow on dark */
.sub-title.sub-dark   { color: var(--rt-secondary-color); }
.sub-title.sub-muted  { color: rgba(255, 255, 255, .86); }

.section-title {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--rt-title-color);
  margin-top: 13px;
}
.section-text {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: var(--rt-body-color);
}
.section-head { max-width: 794px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head .section-text { margin-top: 20px; }

/* ---------- Rotating headline ---------- */
.rotator { display: inline-block; position: relative; }
.rotator-word {
  display: inline-block;
  font-weight: 300;
  position: relative;
  transition: opacity var(--pm-base) var(--pm-ease), transform var(--pm-base) var(--pm-ease);
}
.rotator-word::after {
  content: "";
  position: absolute;
  left: auto; right: 0;
  bottom: 12px;
  width: 46px;
  height: 4px;
  background: var(--rt-tertiary-color);
  border-radius: 2px;
}
.rotator.is-out .rotator-word { opacity: 0; transform: translateY(-14px); }
.rotator--yellow .rotator-word { color: var(--rt-tertiary-color); font-weight: 700; }
.rotator--yellow .rotator-word::after { display: none; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 16px 26px;
  border-radius: var(--pm-radius-sm);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: color var(--pm-base) var(--pm-ease);
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: -1;
  transition: transform .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.btn::before { transform: translate3d(0, 0, 0); }
.btn::after  { transform: translate3d(0, -100%, 0); }
.btn:hover::after { transform: translate3d(0, 0, 0); }
.btn i { font-size: 17px; transition: color var(--pm-base) var(--pm-ease); }

.button-2 { color: var(--rt-button-text-color); }
.button-2 i { color: var(--rt-button-text-color); }
.button-2::before { background-color: var(--pm-primary-hover); }   /* 5.0:1 with #fff */
.button-2::after  { background-color: var(--pm-primary-active); }
.button-2:hover, .button-2:hover i { color: var(--rt-button-color); }

.button-1 { color: var(--rt-button-color); }
.button-1 i { color: var(--rt-button-color); }
.button-1::before { background-color: var(--pm-dark-soft); }
.button-1::after  { background-color: var(--pm-primary); }

/* ghost button — the shared secondary action on dark surfaces */
.button-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.button-ghost i { color: #fff; }
.button-ghost::before { background-color: rgba(255, 255, 255, .06); }
.button-ghost::after  { background-color: #fff; }
.button-ghost:hover, .button-ghost:hover i { color: var(--pm-dark); }

/* accent button — yellow, reserved for the single highest-intent action
   on a light surface. #15202A on #FAB32E is 9.1:1. */
.button-accent { color: var(--pm-dark); }
.button-accent i { color: var(--pm-dark); }
.button-accent::before { background-color: var(--pm-secondary); }
.button-accent::after  { background-color: var(--pm-secondary-hover); }
.button-accent:hover, .button-accent:hover i { color: var(--pm-dark); }
.button-1:hover, .button-1:hover i { color: var(--rt-button-color); }

/* ==========================================================================
   HEADER  —  two-level structure (slim topbar over the main navigation row),
   one component on every standard page. Structure follows the reference
   layout; every colour, icon, word and link is ours.

   ┌──────────────────────────────────────────────────────┐
   │ TOPBAR   location · email            hours │ Log In  │  46px  #15202A
   ├──────────────────────────────────────────────────────┤
   │ LOGO        NAVIGATION        call · REGISTER NOW    │  84px  #FFFFFF
   └──────────────────────────────────────────────────────┘
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  transition: transform .4s var(--pm-ease), box-shadow var(--pm-base) var(--pm-ease);
}
.site-header.is-hidden { transform: translateY(-100%); }

/* ---------- topbar ---------- */
.topbar {
  height: var(--pm-topbar-h);
  background: #1a6ed2;
  overflow: hidden;
  transition: height var(--pm-base) var(--pm-ease),
              opacity var(--pm-fast) var(--pm-ease);
}
/* on scroll the topbar folds away and the navigation row alone stays sticky */
.site-header.is-stuck .topbar { height: 0; opacity: 0; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--pm-topbar-h);
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
}
.topbar ul { display: flex; align-items: center; }
.topbar li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
/* the accent lives here: small icons only, never the text */
.topbar i { font-size: 16px; color: var(--pm-secondary); }
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  transition: color var(--pm-base) var(--pm-ease);
}
.topbar a:hover { color: var(--pm-on-dark); }

.topbar-info { gap: 28px; }
.topbar-info li { position: relative; }
.topbar-info li + li::before {
  content: "";
  position: absolute;
  left: -16px; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transform: translateY(-50%);
}
.topbar-utils li { padding: 0 20px; }
.topbar-utils li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.topbar-utils li:last-child { padding-right: 0; }
.topbar li.topbar-call { display: none; }   /* phones only — see the responsive layer */

/* ---------- main navigation row ---------- */
.header-main {
  height: var(--pm-header-h);
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-header-line);
  transition: box-shadow var(--pm-base) var(--pm-ease);
}
.site-header.is-stuck .header-main { box-shadow: 0 10px 30px rgba(21, 32, 42, .07); }

.header-inner { display: flex; align-items: center; height: 100%; gap: 24px; }
.site-header .brand img { width: 100%; height: auto; max-width:200px;}
.site-header .brand { transition: opacity var(--pm-base) var(--pm-ease); }
.site-header .brand:hover { opacity: .82; }

.main-nav { margin-left: auto; margin-right: auto; }
.menu { display: flex; align-items: center; gap: 30px; }
.menu > li { position: relative; }
.menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--pm-header-h);
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-dark);
  transition: color var(--pm-base) var(--pm-ease);
}
.menu > li.has-sub > a::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--pm-base) var(--pm-ease);
  order: 2;
}
.menu > li > a:hover,
.menu > li > a.is-active { color: var(--pm-primary-text); }

.sub-menu {
  position: absolute;
  top: 100%; left: -24px;
  min-width: 240px;
  padding: 10px 0;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s var(--pm-ease), transform .28s var(--pm-ease), visibility .28s;
}
.menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu a {
  display: block;
  padding: 9px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pm-dark);
  transition: color var(--pm-fast) var(--pm-ease), background var(--pm-fast) var(--pm-ease);
}
.sub-menu a:hover { color: var(--pm-primary-text); background: var(--pm-primary-faint); }

/* ---------- header actions ---------- */
.header-actions { position: relative; z-index: 100; display: flex; align-items: center; gap: 22px; }

/* click-to-call chip: accent icon, dark label, brand-blue number */
.header-call { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1; }
.header-call i {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  background: var(--pm-secondary-soft);
  color: var(--pm-secondary-ink);
  transition: background var(--pm-base) var(--pm-ease), color var(--pm-base) var(--pm-ease);
}
.header-call span { font-weight: 600; color: var(--pm-body); }
.header-call strong { font-weight: 700; color: var(--pm-primary-text); transition: color var(--pm-base) var(--pm-ease); }
.header-call:hover i { background: var(--pm-primary-soft); color: var(--pm-primary-text); }
.header-call:hover strong { color: var(--pm-primary-hover); }

.header-cta { height: 46px; padding: 15px 24px; border-radius: var(--pm-radius-sm); }
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31, 126, 234, .28); }
.btn.header-cta { transition: color var(--pm-base) var(--pm-ease), transform var(--pm-base) var(--pm-ease), box-shadow var(--pm-base) var(--pm-ease); }

/* Log In only appears as a menu row inside the mobile off-canvas panel */
.menu-login { display: none; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--pm-dark);
  border-radius: 2px;
  transition: transform var(--pm-base) var(--pm-ease), opacity var(--pm-fast) var(--pm-ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.offcanvas-overlay {
  position: fixed; inset: 0;
  background: rgba(21, 32, 42, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--pm-ease), visibility .35s;
  z-index: 98;
}
body.nav-open .offcanvas-overlay { opacity: 1; visibility: visible; }

/* ==========================================================================
   1. HERO
   Dark #15202A stage, blue light source for brand identity, yellow used
   three times only (badge dot, rotating word, stat unit) as a controlled
   accent. App screens sit above a continuously rotating dotted-circle field.
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--pm-dark);
  background-image: url('../assets/images/section-noise.webp');
  background-repeat: repeat;
  padding: calc(var(--pm-header-total) + 74px) 0 60px;
  overflow: hidden;
}
/* brand-blue light source — stops the stage reading as flat navy */
.hero-glow {
  position: absolute;
  top: -240px; right: -180px;
  width: 940px; height: 940px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(31, 126, 234, .34) 0%,
              rgba(31, 126, 234, .10) 42%,
              transparent 68%);
  pointer-events: none;
  z-index: 1;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
}

/* ---------- copy ---------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--pm-radius-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgb(255 255 255 / 4%);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #fff;
}
.hero-badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pm-secondary);
  box-shadow: 0 0 0 4px rgba(250, 179, 46, .22);
}

.hero-title {
  margin-top: 26px;
  font-size: var(--pm-h1);
  line-height: var(--pm-h1-lh);
  font-weight: 700;
  letter-spacing: -.6px;
  color: #fff;
  max-width: 100%;
}
.hero-title .rotator { line-height: var(--pm-h1-lh);}
.hero-title .rotator-word { font-weight: 700; color: var(--pm-secondary); }
.hero-title .rotator-word::after { display: none; }

.hero-text {
  margin-top: 22px;
  max-width: 550px;
  font-size: 16px;
  line-height: 28px;
  color: var(--pm-on-dark-body);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* ---------- stat strip ---------- */
.hero-counters {
  display: flex;
  max-width: 500px;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero .counter-box { flex: 1; display: block; padding-right: 20px; }
.hero .counter-box + .counter-box {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.counter-number {
  font-family: var(--rt-heading-font);
  font-size: 20px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #fff;
}
.hero .counter-unit { color: var(--pm-secondary); }
.counter-label { font-size: 16px; line-height: 16px; font-weight: 600; color: #fff; }
.hero .counter-label { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--pm-on-dark-body); }

/* ---------- app screens + rotating dotted circle ---------- */
.hero-media { position: relative; display: flex; justify-content: center; }
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* soft blue disc directly behind the screens, for depth */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 126, 234, .30), transparent 70%);
  filter: blur(8px);
  z-index: 0;
}
.hero-ring {
  position: absolute;
  top: 50%; left: 50%;
  display: block;
  aspect-ratio: 1 / 1;
  line-height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.hero-ring img { display: block; width: 100%; height: 100%; }
.hero-ring--outer { width: 100%; opacity: .9; }
.hero-ring--inner { width: 67%; opacity: .5; }
/* seamless because the artwork is radially symmetric — no visible restart */
.hero-ring--outer img { animation: pm-spin 72s linear infinite; }
.hero-ring--inner img { animation: pm-spin 46s linear infinite reverse; }

@keyframes pm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero-phone {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-ring--outer img, .hero-ring--inner img { animation: none; }
}

/* ==========================================================================
   2. FEATURES   (ref: 994 = 140 + 714 + 140)
   ========================================================================== */
.features { padding: var(--rt-section-space) 0; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  margin-top: 31px;
}
.feature-card {
  background: var(--rt-gray20);
  border-radius: var(--pm-radius-lg);
  padding: 40px;
  overflow: hidden;
}
.info-icon-holder { display: flex; align-items: center; gap: 15px; }
.info-icon i { font-size: 40px; color: var(--rt-primary-color); }
.info-title { font-size: 22px; line-height: 26.4px; font-weight: 600; }
.feature-card > p { margin-top: 17px;font-weight: 400; }
.feature-card > img { margin-top: 24px; width: 100%; max-width: 100%; }

/* ==========================================================================
   3. EFFICIENT BANKING   (ref: 582, no vertical padding)
   ========================================================================== */
.efficient-grid { display: grid; grid-template-columns: 590px 1fr; align-items: end; height: auto; }
.efficient-media { position: relative; height: auto; }
.efficient-media .about-photo { max-width: 500px; width: 100%;}
/* the reference column carries 130px bottom padding, lifting the centred copy */
.efficient-copy { padding-right: 55px; padding-bottom: 130px; }
.efficient-copy .section-text { margin-top: 20px; }

.check-list { margin-top: 26px; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--rt-title-color); }
.check-list i {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pm-primary-hover);
  color: #fff;
  font-size: 11px;
}
.efficient-copy .btn { margin-top: 34px; }

/* ==========================================================================
   4. SPOTLIGHT   (ref: 738 = 140 + 458 + 140)
   ========================================================================== */
.spotlight {
  position: relative;
  background: var(--pm-dark);
  padding: var(--rt-section-space) 0;
  overflow: hidden;
}
.spotlight-shape { position: absolute; top: -22px; left: calc(50% - 364px); width: 608px; pointer-events: none;opacity: 0.1; }
.spotlight-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 455px 1fr; }
.spotlight-copy .section-title { color: #fff; }
.spotlight-copy .section-text { margin-top: 20px; color: var(--pm-on-dark-body); }
.spotlight-copy .btn { margin-top: 40px; }

.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 29px; }
.service-card {
  background: #fff;
  border-radius: var(--pm-radius-lg);
  padding: 35px 45px;
  box-shadow: 10px 10px 0 0 rgba(21, 32, 42, .16);
}
.service-card > p { margin-top: 18px; }

/* ==========================================================================
   5 & 6. SPLIT SECTIONS
   ========================================================================== */
.split { padding: var(--rt-section-space) 0; }
.split--media-right { padding-bottom: var(--rt-section-space); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split-media { position: relative; }
.split-bg { width: 100%; border-radius: var(--pm-radius-lg); }
.split-front { position: absolute; }
.split-front--phone { top: 107px; left: 171px; width: 350px; }
.split-front--graph { top: 118px; left: 172px; width: 490px; }

.split--media-left  .split-copy { padding-left: 100px; }
.split--media-right .split-copy { padding-right: 100px; }
.split-copy .section-text { margin-top: 20px; }
.split-copy .btn { margin-top: 36px; }

.icon-list { margin-top: 30px; display: grid; gap: 16px; }
.icon-list li { display: flex; align-items: center; gap: 18px; font-size: 18px; font-weight: 600; color: var(--rt-title-color); }
.icon-circle {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(31, 126, 234, .28);
  color: var(--rt-tertiary-color);
  font-size: 18px;
}

/* ==========================================================================
   7. STATS   (ref: 568 = 140 + 288 + 140)
   ========================================================================== */
.stats {
  background-color: var(--pm-dark);
  background-image: url('../assets/images/dot-pattern.webp');
  background-repeat: no-repeat;
  background-position: center;
  padding: 80px 0px;
}
.stats-title {
  max-width: 862px;
  margin: 0 auto;
  text-align: center;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #fff;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 55px; padding-bottom: 6px; }
.stat .counter-number { font-size: 70px; line-height: 86px; font-weight: 500; color: #fff; text-align: center;}
.stat .counter-label { margin-top: 15px; font-size: 20px; line-height: 20px; font-weight: 600; color: #1a6ed2; text-align: center;}

/* ==========================================================================
   8. TESTIMONIALS   (ref: 885 = 140 + 605 + 140)
   ========================================================================== */
.testimonials { padding: var(--rt-section-space) 0; }
.testimonials-grid { display: grid; grid-template-columns: 455px 1fr; }
.testimonials-copy .section-text { margin-top: 20px; }
.testimonials-copy .btn { margin-top: 36px; }

/* the slider viewport shows exactly two rows (2 x 290 + 24 gap) */
.testimonial-slider { padding: 0 12px 0 50px; height: auto; overflow: hidden; }
.testimonial-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 17px;
}
.testimonial-card {
  position: relative;
  background: #f7f7f7;
  border-radius: var(--pm-radius-lg);
  padding: 23px;
  overflow: hidden;
}
.stars { display: flex; gap: 3px; color: #f7992b; font-size: 15px; }
.testimonial-text { margin-top: 20px; font-size: 15px; line-height: 24px; font-weight: 500;max-width: 690px;text-align: left;margin: 15px auto 30px;color: #3e4c6a;}
.testimonial-author { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.testimonial-author img { width: 60px; height: 60px; border-radius: 50%; }
.testimonial-author h3 { font-size: 16px; line-height: 20.8px; font-weight: 600; color: var(--pm-primary-text); }
.testimonial-author .role { font-size: 15px; line-height: 28px; font-weight: 500; color: var(--pm-body); }
.quote-mark { position: absolute; right: 14px; bottom: 16px; font-size: 24px; color: #fff; line-height: 1; }

/* ==========================================================================
   9. BRANDS   (ref: 139)
   ========================================================================== */
.brands-inner { padding-top: 0px; padding-bottom: 130px;}
.brands-title { text-align: center; font-size: 18px; line-height: 21.6px; font-weight: 400; color: var(--rt-title-color); }
.brands-title strong { font-weight: 700; }
.brand-slider { overflow: hidden; margin-top: 24px; height: 46px; }
.brand-track { display: flex; align-items: center; height: 46px; }
.brand-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 40px; }
.brand-item img { filter: grayscale(1); opacity: .85; max-height: 38px; width: auto; }

/* ==========================================================================
   10. BLOG   (ref: 916 = 140 + 636 + 140)
   ========================================================================== */
.blog { padding: var(--rt-section-space) 0; }
.blog-slider { margin-top: 34px; overflow: hidden; }
.blog-track { display: flex; gap: 23px; }
.blog-card { flex: 0 0 auto; width: calc((100% - 46px) / 3); }
.blog-thumb { position: relative; border-radius: var(--pm-radius); overflow: hidden; }
.blog-thumb img { width: 100%; height: auto; aspect-ratio: 960 / 690; object-fit: cover; }
.blog-cat {
  position: absolute;
  left: 24px; bottom: 16px;
  padding: 7px 16px;
  border-radius: var(--pm-radius-pill);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--rt-title-color);
}
.blog-title { margin-top: 34px; font-size: 22px; line-height: 30.8px; font-weight: 700; }
.blog-title a { transition: color var(--pm-base) var(--pm-ease); }
.blog-title a:hover { color: var(--rt-primary-color); }
.blog-meta { display: flex; gap: 26px; margin-top: 12px; }
.blog-meta li { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 23px; font-weight: 500; color: var(--pm-primary-text); }

/* ==========================================================================
   11. CTA   (ref: 291)
   ========================================================================== */
.cta {
  background-color: #2ebdc3;
  background-repeat: repeat;
  overflow: hidden;
  padding: 50px 0px 40px;
}
.cta-copy span.sub-title {text-align: center;font-weight: 500;}
.cta-grid {display: flex; grid-template-columns: 351px 638px 1fr; align-items: center; height: auto; gap: 30px;    flex-direction: column;justify-content: center; }
.cta-media { position: relative; height: 291px; }
.cta-media img { position: absolute; left: 12px; bottom: 0; width: 307px; max-width: none; }
.cta-title {text-align: center;margin-top: 9px; font-size: 36px; line-height: 43.2px; font-weight: 700; color: #fff; }
.cta-action { display: flex; justify-content: flex-end; }

/* ---------- Scroll reveal ---------- */
.js .wow { opacity: 0; transform: translateY(28px); transition: opacity var(--pm-slow) var(--pm-ease), transform var(--pm-slow) var(--pm-ease); }
.js .wow.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wow { opacity: 1; transform: none; transition: none; }
  .rotator-word { transition: none; }
}

/* ==========================================================================
   LAYOUT GUARDS
   Grid and flex items default to min-width:auto, so a single long word can
   push its track wider than the container and scroll the whole page.
   ========================================================================== */
.hero-grid > *, .feature-grid > *, .service-grid > *, .split-grid > *,
.stats-grid > *, .cta-grid > *, .testimonial-track > *, .hero-counters > *,
.svc-grid > *, .list-grid > *, .trust-grid > *, .region-grid > *,
.panel-grid > *, .role-cards > *, .role-detail > *, .net-stat-grid > *,
.net-grid > *, .coverage > *, .contact-grid > *, .form-grid > *,
.role-pick > *, .auth-shell > *, .auth-form .field-row > *,
.legal-grid > *, .faq-btn > *, .auth-form > *, .check-line > * { min-width: 0; }

/* Text inside a flex row needs `anywhere` rather than `break-word`: it is the
   only value that also shrinks min-content size, so a long slash-joined term
   ("retailer/distributor/subsidiary") cannot widen its own track. */
.check-list li, .icon-list li, .svc-card li, .list-card li,
.auth-point span, .trust-card span, .chip { overflow-wrap: anywhere; }

/* ==========================================================================
   GLOBAL MOTION + INTERACTION LANGUAGE
   One easing curve and three durations for the whole site, plus a single
   focus ring. Everything honours prefers-reduced-motion.
   ========================================================================== */
a, button, input, select, textarea, .btn, .card, .svc-card, .list-card,
.region-card, .role-item, .trust-card, .feature-card, .service-card,
.blog-card, .icon-circle {
  transition-timing-function: var(--pm-ease);
}

/* one visible focus ring everywhere (keyboard accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--pm-primary);
  outline-offset: 3px;
  border-radius: var(--pm-radius-sm);
}

/* consistent card lift — the same gesture on every card type */
.svc-card, .list-card, .region-card, .trust-card, .role-item, .feature-card {
  transition: transform var(--pm-base) var(--pm-ease),
              box-shadow var(--pm-base) var(--pm-ease);
  will-change: transform;
}
.trust-card:hover, .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pm-shadow);
}

/* nav underline grow — replaces the abrupt colour flip */
.menu > li > a { position: relative; }
.menu > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pm-primary) 0%, var(--pm-secondary) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pm-base) var(--pm-ease);
}
.menu > li > a:hover::after,
.menu > li > a.is-active::after { transform: scaleX(1); }

/* CTA band sits on deep brand blue: invert the buttons for contrast */
.cta .button-2::before, .cta-band .button-2::before { background-color: #ffffff; }
.cta .button-2::after,  .cta-band .button-2::after  { background-color: var(--pm-dark); }
.cta .button-2, .cta-band .button-2,
.cta .button-2 i, .cta-band .button-2 i { color: var(--pm-dark); }
.cta .button-2:hover, .cta-band .button-2:hover,
.cta .button-2:hover i, .cta-band .button-2:hover i { color: #ffffff; }
/* ghost button on the deep-blue CTA: .10 fill keeps white text at 5.1:1,
   and the hover state goes solid navy (14.4:1) rather than lighter. */
.cta .button-1, .cta-band .button-1 { border: 1px solid rgba(255, 255, 255, .38); }
.cta .button-1::before, .cta-band .button-1::before { background-color: rgba(255, 255, 255, .10); }
.cta .button-1::after,  .cta-band .button-1::after  { background-color: var(--pm-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .svc-card:hover, .list-card:hover, .region-card:hover,
  .trust-card:hover, .feature-card:hover { transform: none; }
}