/* YD modern layer — quiet, premium finish on top of yd-polish.css.
   Same blue/white identity and section order; only selectors outside the admin-generated
   markup are restructured, and region content is styled through its existing classes.
   Patterns adapted from 21st.dev community components (Floating Navbar, Gradient Small Grid, Container Scroll Animation)
   and React Bits (BlurText, Dot Field), rewritten in plain CSS/JS. */
:root {
  --ydm-ink: #0b1b3f;
  --ydm-accent: #03338a;
  --ydm-accent-2: #2f6fe0;
  --ydm-muted: #5d6b82;
  --ydm-line: rgba(11, 27, 63, .08);
  --ydm-glass: rgba(255, 255, 255, .72);
  --ydm-shadow-sm: 0 1px 2px rgba(11, 27, 63, .04), 0 4px 14px rgba(11, 27, 63, .05);
  --ydm-shadow-md: 0 1px 2px rgba(11, 27, 63, .04), 0 12px 32px rgba(11, 27, 63, .08);
  --ydm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Header: slim top bar + floating bar that tightens on scroll ---------- */
#header.header { background: transparent; box-shadow: none; }
#header .topbar {
  height: 34px;
  background: var(--ydm-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
#header .topbar .contact-info i a { color: rgba(255, 255, 255, .78); letter-spacing: .01em; }
#header .topbar .social-links a { color: rgba(255, 255, 255, .55); }
#header .topbar .social-links a:hover,
#header .topbar .contact-info i a:hover { color: #fff; }

#header .branding {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 14px 0;
  min-height: 0;
  transition: padding .45s var(--ydm-ease);
}
#header .branding > .container {
  position: relative;
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  transition: max-width .55s var(--ydm-ease), padding .45s var(--ydm-ease);
}
/* Surface lives on a pseudo-element: backdrop-filter on the container itself would trap the
   fixed-position mobile menu inside it. */
#header .branding > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(11, 27, 63, .07);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 1px rgba(11, 27, 63, .03), 0 8px 24px -8px rgba(11, 27, 63, .1);
  transition: background .4s ease, box-shadow .4s ease;
}
.scrolled #header .branding { padding: 10px 0; }
.scrolled #header .branding > .container::before {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 1px rgba(11, 27, 63, .04), 0 14px 34px -10px rgba(11, 27, 63, .18);
}
@media (min-width: 1200px) {
  .scrolled #header .branding > .container { max-width: 1080px; padding: 6px 6px 6px 8px; }
}
.scrolled #header.header { box-shadow: none; }
/* soft fade behind the floating bar so content scrolling past doesn't show around it */
#header.header::before {
  content: "";
  position: absolute;
  inset: 0 0 -18px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 250, 250, .92) 0%, rgba(250, 250, 250, .7) 60%, rgba(250, 250, 250, 0) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.scrolled #header.header::before { opacity: 1; }

#header .logo { gap: 10px; }
#header .logo h1.sitename {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ydm-ink);
}
#header .yd-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2f6fe0 0%, #03338a 70%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px rgba(3, 51, 138, .25);
}

@media (min-width: 1200px) {
  #navmenu > ul { position: relative; gap: 0; }
  #navmenu > ul > li > a,
  #navmenu > ul > li > a:focus {
    position: relative;
    z-index: 1;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #4a5670;
    background: transparent !important;
    transition: color .25s ease;
  }
  #navmenu > ul > li > a:hover,
  #navmenu > ul > li:hover > a,
  #navmenu > ul > li > a.active { color: var(--ydm-ink); }
  #navmenu > ul > li > a::after { display: none !important; } /* old underline / tubelight bar */

  /* Sliding pill (positioned by yd-modern.js) */
  #navmenu .ydm-nav-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 36px;
    border-radius: 999px;
    background: rgba(3, 51, 138, .07);
    box-shadow: inset 0 0 0 1px rgba(3, 51, 138, .06);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s var(--ydm-ease), width .45s var(--ydm-ease), opacity .3s ease;
  }
  #navmenu .ydm-nav-pill.is-on { opacity: 1; }

  /* Last item (Contact) as the primary action */
  #navmenu > ul > li:last-child { margin-left: 8px; }
  #navmenu > ul > li:last-child > a,
  #navmenu > ul > li:last-child > a:focus {
    padding: 10px 18px 10px 20px;
    color: #fff !important;
    background: linear-gradient(180deg, #0a3fa3 0%, var(--ydm-accent) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px -4px rgba(3, 51, 138, .45);
    transition: transform .3s var(--ydm-ease), box-shadow .3s ease;
  }
  #navmenu > ul > li:last-child > a::before {
    content: "\f138"; /* bi-arrow-right-short */
    order: 2;
    margin-left: 4px;
    font-family: "bootstrap-icons";
    font-size: 17px;
    line-height: 1;
    transition: transform .3s var(--ydm-ease);
  }
  #navmenu > ul > li:last-child > a:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -6px rgba(3, 51, 138, .55); }
  #navmenu > ul > li:last-child > a:hover::before { transform: translateX(2px); }

  .navmenu .dropdown ul {
    padding: 6px;
    border-radius: 16px;
    border: 1px solid var(--ydm-line);
    box-shadow: 0 18px 40px -12px rgba(11, 27, 63, .22);
  }
  #navmenu > ul > .dropdown > ul { left: auto; right: 0; } /* last items sit near the edge */
  .navmenu .dropdown ul a { border-radius: 10px; font-size: 14px; }
  .navmenu .dropdown ul a:hover { background: rgba(3, 51, 138, .05); }
}

@media (max-width: 1199.98px) {
  #header .branding > .container { padding: 6px 8px 6px 8px; }
  #header .mobile-nav-toggle {
    width: 40px;
    height: 40px;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--ydm-ink);
    border-radius: 50%;
    background: rgba(3, 51, 138, .06);
  }
  .mobile-nav-active #header .mobile-nav-toggle { color: #fff; background: rgba(255, 255, 255, .12); }
  .mobile-nav-active .navmenu { background: rgba(11, 27, 63, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .mobile-nav-active .navmenu > ul { border-radius: 22px; padding: 10px; inset: 72px 16px auto 16px; max-height: calc(100vh - 90px); }
  .mobile-nav-active .navmenu > ul a { border-radius: 12px; }
  .navmenu > ul > li:last-child { padding: 8px 10px 4px; }
  .navmenu > ul > li:last-child > a {
    justify-content: center !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #0a3fa3 0%, var(--ydm-accent) 100%);
    box-shadow: 0 8px 18px -6px rgba(3, 51, 138, .5);
  }
}
@media (max-width: 575px) {
  #header .branding { padding: 8px 0; }
  #header .branding > .container { width: calc(100% - 24px); }
  #header .logo h1.sitename { font-size: 14px; }
  #header .yd-logo-mark { width: 32px; height: 32px; }
}

/* ---------- Hero ---------- */
#hero.hero { position: relative; overflow: hidden; isolation: isolate; background: transparent; }
#hero > .container { position: relative; z-index: 1; }

#hero h1 {
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
  max-width: 620px;
  color: var(--ydm-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
#hero p {
  font-size: clamp(16px, 1.45vw, 20px);
  color: var(--ydm-muted);
  margin-block: 20px 34px;
}

/* BlurText: words fade up out of a blur, one after another. */
#hero h1 .ydm-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  animation: ydm-blur-in .9s var(--ydm-ease) forwards;
  animation-delay: calc(var(--i) * 80ms + 80ms);
}
#hero p.ydm-fade,
#hero .d-flex.ydm-fade {
  opacity: 0;
  animation: ydm-blur-in .9s var(--ydm-ease) forwards;
  animation-delay: var(--delay, .5s);
}
@keyframes ydm-blur-in {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Logo artwork: soft halo instead of a heavy shadow. */
#hero .hero-img { position: relative; }
#hero .hero-img::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 111, 224, .16), rgba(47, 111, 224, 0));
}
#hero .hero-img img.animated {
  filter: drop-shadow(0 22px 40px rgba(3, 51, 138, .14));
  animation-duration: 9s;
}

/* ---------- Primary button (shared by hero, pricing, contact) ---------- */
.btn-get-started,
.pricing .btn-choose,
.contact .php-email-form button[type="submit"] {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0a3fa3 0%, var(--ydm-accent) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 2px rgba(3, 51, 138, .25),
    0 8px 20px rgba(3, 51, 138, .2) !important;
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform .3s var(--ydm-ease), box-shadow .3s var(--ydm-ease) !important;
}
.btn-get-started::after,
.pricing .btn-choose::after,
.contact .php-email-form button[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s var(--ydm-ease);
  pointer-events: none;
}
.btn-get-started:hover::after,
.pricing .btn-choose:hover::after,
.contact .php-email-form button[type="submit"]:hover::after { transform: translateX(120%); }
.btn-get-started:hover,
.pricing .btn-choose:hover,
.contact .php-email-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 4px rgba(3, 51, 138, .2),
    0 14px 30px rgba(3, 51, 138, .26) !important;
}
#hero .btn-get-started {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 30px 0 32px;
  font-size: 15px;
}

@media (max-width: 991px) {
  #hero h1, #hero p { text-align: center; }
  #hero .d-flex { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  #hero h1 .ydm-word,
  #hero p.ydm-fade,
  #hero .d-flex.ydm-fade { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ---------- Hero backdrop (21st "Gradient Small Grid" + React Bits "Dot Field", in brand blue) ----------
   Blue at the top fading to white, with a fine canvas of small dots (yd-modern.js) that move away
   from the cursor. */
.ydm-top-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 0% 15%, rgba(111, 156, 240, .22), rgba(111, 156, 240, 0) 70%),
    radial-gradient(55% 45% at 100% 15%, rgba(111, 156, 240, .22), rgba(111, 156, 240, 0) 70%),
    linear-gradient(180deg, #dbe7ff 0%, #e9f0ff 40%, #f7f9ff 68%, #fff 88%);
  /* melt into the page colour at the bottom so the next section joins seamlessly */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.ydm-top-bg .ydm-dots {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* dots are clearest near the top and dissolve toward the bottom */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 90%);
}

/* Logo tilt (set by JS) eases back when the cursor leaves */
#hero .hero-img { transition: transform .6s var(--ydm-ease); transform-style: preserve-3d; }

/* ---------- Distribution map in a device frame (21st "Container Scroll Animation") ----------
   yd-modern.js wraps .dist-map-wrap in .ydm-cs > .ydm-cs-card > .ydm-cs-screen and drives the tilt. */
#clients.clients.ydm-cs-on {
  /* transparent where it meets the hero, solid page colour where it meets About */
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 72%) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-block: 40px 150px;
  overflow: visible; /* let the frame's long shadow fall onto the next section (html clips x) */
}
#clients.ydm-cs-on .dist { max-width: 1100px; }
#clients.ydm-cs-on .dist-head {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ydm-ink);
  will-change: transform;
}
#clients.ydm-cs-on .dist-head .platform-rotator,
#clients.ydm-cs-on .dist-head .platform-rotator .roll { color: var(--ydm-accent); }
#clients.ydm-cs-on .dist-head .platform-rotator .roll .pname { color: var(--ydm-ink); letter-spacing: -.03em; }
#clients.ydm-cs-on .dist-sub { color: var(--ydm-muted); will-change: transform; }
#clients.ydm-cs-on .dist-sub i { color: var(--ydm-accent-2); }

#clients .ydm-cs {
  position: relative;
  margin-top: 26px;
  perspective: 1000px;
}
#clients .ydm-cs::before { /* soft blue pool of light under the device */
  content: "";
  position: absolute;
  inset: 18% 6% -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 111, 224, .22), rgba(47, 111, 224, 0));
  filter: blur(24px);
}
#clients .ydm-cs-card {
  max-width: 1024px;
  margin: 0 auto;
  padding: 14px;
  background: #222;
  border: 4px solid #6c6c6c;
  border-radius: 30px;
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000b,
    0 233px 65px #00000003;
  transform-origin: 50% 50%;
  will-change: transform;
}
#clients .ydm-cs-screen {
  position: relative;
  overflow: hidden;
  padding: 26px 18px 18px;
  border-radius: 18px;
  background-color: #081938;
  background-image:
    radial-gradient(circle at 50% 40%, rgba(31, 110, 224, .3) 0%, rgba(31, 110, 224, 0) 58%),
    linear-gradient(180deg, #0e2a5e 0%, #0a1c44 50%, #061230 100%);
}
#clients .ydm-cs-screen .dist-map-wrap { margin: 0 auto; }
@media (max-width: 767.98px) {
  #clients.clients.ydm-cs-on { padding-block: 56px 72px; }
  #clients .ydm-cs { margin-top: 18px; }
  #clients .ydm-cs-card {
    padding: 6px;
    border-width: 3px;
    border-radius: 20px;
    box-shadow: 0 6px 14px #0000003d, 0 22px 26px #0000002b, 0 44px 34px #00000014;
  }
  #clients .ydm-cs-screen { padding: 14px 6px 10px; border-radius: 14px; }
}

/* =====================================================================
   Sections: sticky header, titles, bento grids, testimonials, FAQ, footer
   ===================================================================== */

/* ---------- Sticky floating header ----------
   `overflow-x: hidden` on html/body turns body into a scroll container, which stops sticky
   from working; `clip` prevents the sideways scroll without that side effect. */
html, body { overflow-x: clip; }
#header.header { position: sticky; top: 0; }
#header .branding { pointer-events: none; }
#header .branding > .container { pointer-events: auto; }

/* ---------- Section titles: one quiet system ---------- */
.section-title::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ydm-accent), var(--ydm-accent-2));
}
.section-title h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: var(--ydm-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
.section-title h2::before,
.section-title h2::after { display: none !important; }
.section-title h2 i { color: var(--ydm-accent); -webkit-text-fill-color: currentColor; margin-right: 4px; }
.section-title p { max-width: 640px; margin-inline: auto; color: var(--ydm-muted); }
#security .section-title h2 { color: #fff !important; }
#security .section-title h2 i { color: #7aa7ff; }
#security .section-title::before { background: linear-gradient(90deg, #7aa7ff, #fff); }

/* Shared card surface + cursor spotlight (21st "Spotlight Card"; --mx/--my come from the page JS). */
#pricing .price-card,
#services .service-card,
#features .feature-card,
#contact .contact-card,
#contact .contact-form-wrapper {
  background: #fff;
  border: 1px solid var(--ydm-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--ydm-shadow-sm) !important;
}
#pricing .price-card,
#services .service-card,
#features .feature-card { position: relative; overflow: hidden; }
#pricing .price-card::after,
#services .service-card::after,
#features .feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 111, 224, .08), transparent 45%);
  opacity: 0;
  transition: opacity .35s ease;
}
#pricing .price-card:hover::after,
#services .service-card:hover::after,
#features .feature-card:hover::after { opacity: 1; }
#pricing .price-card > *,
#services .service-card > *,
#features .feature-card > * { position: relative; z-index: 1; }
#pricing .price-card > .ribbon { position: absolute; z-index: 2; }
#features .feature-card > .feature-num { position: absolute; }
#pricing .price-card:hover,
#services .service-card:hover,
#features .feature-card:hover {
  box-shadow: var(--ydm-shadow-md) !important;
  border-color: rgba(3, 51, 138, .14) !important;
}
#services .service-card:hover { transform: translateY(-3px); }
#pricing .price-card::before,
#services .service-card::before { display: none !important; }

/* ---------- About ---------- */
#about .about-content .section-subtitle {
  display: table !important; /* its own line, above the title */
  margin-bottom: 14px !important;
  padding: 6px 14px 6px 12px;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--ydm-accent) !important;
  background: rgba(3, 51, 138, .06);
  border: 1px solid rgba(3, 51, 138, .1);
}
#about .about-content .section-subtitle::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--ydm-accent-2);
  box-shadow: 0 0 0 3px rgba(47, 111, 224, .18);
  vertical-align: middle;
}
#about .about-content .about-title {
  display: block;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ydm-ink);
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
#about .about-content .about-description { color: var(--ydm-muted) !important; font-size: 16px; line-height: 1.85; margin-bottom: 18px; }

/* Feature list: hairline-separated rows, icon aligned with the heading */
#about .features { margin-top: 8px; }
#about .features .feature-item {
  align-items: flex-start !important;
  gap: 16px;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--ydm-line);
  border-radius: 0;
  transform: none !important;
}
#about .features .feature-item:first-child { border-top: 0; }
#about .features .feature-item i {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  margin: 2px 0 0 !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  color: var(--ydm-accent) !important;
  background: rgba(3, 51, 138, .07) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .3s ease, color .3s ease;
}
#about .features .feature-item:hover i { background: var(--ydm-accent) !important; color: #fff !important; transform: none !important; }
#about .features .feature-item .feature-content h4 { color: var(--ydm-ink) !important; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
#about .features .feature-item .feature-content p { color: var(--ydm-muted) !important; font-size: 14px; line-height: 1.75; margin: 0; }

/* Photos: no thick frames; a dot pattern behind instead of the glow orb */
#about .about-images::before {
  top: -28px;
  left: -28px;
  width: 58%;
  height: 62%;
  border-radius: 24px;
  background: radial-gradient(rgba(3, 51, 138, .22) 1.2px, transparent 1.6px) 0 0 / 18px 18px;
  filter: none;
  animation: none;
  -webkit-mask-image: radial-gradient(ellipse at top left, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at top left, #000 30%, transparent 75%);
}
#about .about-images .main-image {
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 4px rgba(11, 27, 63, .05), 0 30px 60px -20px rgba(3, 51, 138, .3) !important;
  transform: none !important;
}
#about .about-images .secondary-image {
  border: 6px solid #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 48px -16px rgba(3, 51, 138, .35) !important;
  transform: none !important;
}
#about .about-images .client-count {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -14px rgba(3, 51, 138, .3) !important;
  transform: none !important;
}
#about .about-images .client-count .count-text h3 {
  background: linear-gradient(180deg, var(--ydm-accent-2), var(--ydm-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -.02em;
}
#about .about-images .client-count .count-text p { color: var(--ydm-muted); }
@media (max-width: 991.98px) {
  /* the template stacks the portrait photo full-width here, which makes the section very long */
  #about .about-images .secondary-image { display: none; }
  #about .about-images .client-count { margin-top: -36px !important; margin-inline: 16px; position: relative; }
  #about .about-content { margin-top: 32px; }
}

/* ---------- About, bolder (classes and elements added by aboutSection() in yd-modern.js) ---------- */
#about.ydm-about { position: relative; overflow: hidden; }
#about.ydm-about > .container { position: relative; z-index: 1; }

/* Outline watermark */
#about .ydm-about-mark {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  font-size: clamp(120px, 22vw, 340px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: rgba(3, 51, 138, .035);
  pointer-events: none;
  user-select: none;
}

/* Gradient "YD" with a slow sweep */
#about .ydm-grad-text {
  background: linear-gradient(100deg, #03338a 0%, #2f6fe0 35%, #7aa7ff 50%, #2f6fe0 65%, #03338a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ydm-sweep 6s ease-in-out infinite;
}
@keyframes ydm-sweep {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}
#about.ydm-about .about-content .about-title { font-size: clamp(36px, 4vw, 56px); letter-spacing: -.04em; }

/* Photos: parallax via the independent `translate` property (transform is used elsewhere) */
#about.ydm-about .about-images .main-image,
#about.ydm-about .about-images .secondary-image { translate: 0 var(--py, 0); transition: none; }

/* Feature cards row */
#about .features.ydm-fcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 56px 0 0 !important;
}
@media (min-width: 768px) { #about .features.ydm-fcards { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1200px) { #about .features.ydm-fcards { grid-template-columns: repeat(4, 1fr); } }
#about .features.ydm-fcards .feature-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 18px;
  padding: 26px 24px 24px !important;
  border: 1px solid var(--ydm-line) !important;
  border-radius: 22px !important;
  background: #fff;
  box-shadow: var(--ydm-shadow-sm);
  transition: transform .45s var(--ydm-ease), box-shadow .45s ease, border-color .45s ease !important;
}
#about .features.ydm-fcards .feature-item::before { /* cursor light */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(47, 111, 224, .1), transparent 50%);
  opacity: 0;
  transition: opacity .35s ease;
}
#about .features.ydm-fcards .feature-item::after { /* accent line that grows on hover */
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #03338a, #2f6fe0, #7aa7ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ydm-ease);
}
#about .features.ydm-fcards .feature-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--ydm-shadow-md);
  border-color: rgba(3, 51, 138, .14) !important;
}
#about .features.ydm-fcards .feature-item:hover::before { opacity: 1; }
#about .features.ydm-fcards .feature-item:hover::after { transform: scaleX(1); }
#about .features.ydm-fcards .feature-item i {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  border-radius: 14px !important;
  font-size: 20px !important;
  margin: 0 !important;
}
#about .features.ydm-fcards .feature-item:hover i { transform: rotate(-8deg) scale(1.06) !important; }
#about .features.ydm-fcards .ydm-fnum {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(3, 51, 138, .08);
  transition: color .35s ease;
}
#about .features.ydm-fcards .feature-item:hover .ydm-fnum { color: rgba(3, 51, 138, .2); }
#about .features.ydm-fcards .feature-content h4 { font-size: 18px !important; }

@media (max-width: 991.98px) {
  #about .ydm-about-mark { top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  #about .ydm-grad-text { animation: none !important; }
}

/* ---------- Stats: bento on a calm navy band ---------- */
#stats.stats { background: linear-gradient(180deg, #03338a 0%, #022a73 100%); }
#stats .yd-orbs { opacity: .35; }
#stats .stats-wrapper {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
#stats .stats-wrapper > .row,
#stats .stats-wrapper > .row > [class*="col-"] { display: contents; }
#stats .stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  height: 100%;
  margin: 0 !important;
  padding: 26px 26px 24px;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transform: none !important;
}
#stats .stat-card:hover { background: rgba(255, 255, 255, .09) !important; }
#stats .stat-card::before { display: none !important; }
#stats .stat-card::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), transparent 50%) !important; }
#stats .stat-card .stat-icon {
  width: 42px;
  height: 42px;
  margin: 0 !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
  transform: none !important;
}
#stats .stat-card .stat-icon i { color: #fff !important; font-size: 19px; }
#stats .stat-card .stat-content { flex: 0 0 auto; margin-top: auto; }
#stats .stat-card .stat-content h3 {
  margin: 0 0 6px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
#stats .stat-card .stat-content p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .68) !important;
}
@media (min-width: 768px) {
  #stats .stats-wrapper { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); gap: 16px; }
  /* views is the large tile; artists + songs sit to its right, countries spans below them */
  #stats .stats-wrapper > .row:nth-of-type(2) > :first-child .stat-card { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  #stats .stats-wrapper > .row:nth-of-type(1) > :nth-child(1) .stat-card { grid-column: 3; grid-row: 1; }
  #stats .stats-wrapper > .row:nth-of-type(1) > :nth-child(2) .stat-card { grid-column: 4; grid-row: 1; }
  #stats .stats-wrapper > .row:nth-of-type(2) > :nth-child(2) .stat-card { grid-column: 3 / span 2; grid-row: 2; }
  #stats .stats-wrapper > .row:nth-of-type(2) > :first-child .stat-card {
    padding: 34px;
    background:
      radial-gradient(600px 300px at 0% 0%, rgba(122, 167, 255, .22), transparent 60%),
      rgba(255, 255, 255, .06) !important;
  }
  #stats .stats-wrapper > .row:nth-of-type(2) > :first-child .stat-content h3 { font-size: clamp(40px, 4.4vw, 60px); }
}
@media (max-width: 767.98px) {
  #stats .stats-wrapper > .row:nth-of-type(2) > :first-child .stat-card,
  #stats .stats-wrapper > .row:nth-of-type(2) > :nth-child(2) .stat-card { grid-column: span 2; }
  #stats .stat-card { padding: 20px; gap: 20px; }
}

/* ---------- Stats bento, refined (classes and decorations added by statsBento() in yd-modern.js) ---------- */
#stats.stats.ydm-stats-on {
  padding-block: 96px !important; /* beats the inline padding-top on the section */
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(122, 167, 255, .26), rgba(122, 167, 255, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(180deg, #032c7d 0%, #021d57 100%);
}
#stats.ydm-stats-on .yd-orbs,
#stats.stats.ydm-stats-on::before,
#stats.stats.ydm-stats-on::after { display: none !important; }
#stats.ydm-stats-on .stat-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 48px -24px rgba(0, 8, 32, .55) !important;
  transition: transform .45s var(--ydm-ease), border-color .45s ease, background .45s ease !important;
}
#stats.ydm-stats-on .stat-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
#stats.ydm-stats-on .stat-card > .stat-icon,
#stats.ydm-stats-on .stat-card > .stat-content { position: relative; z-index: 2; }
#stats.ydm-stats-on .stat-card .stat-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .12);
}
#stats.ydm-stats-on .stat-card .stat-icon i { font-size: 16px; color: #cfe0ff !important; }
#stats.ydm-stats-on .stat-card .stat-content h3 {
  background: linear-gradient(180deg, #fff 35%, #bcd2ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  white-space: nowrap;
}
#stats.ydm-stats-on .stat-card .stat-content p {
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, .62) !important;
}
@media (min-width: 768px) {
  #stats.ydm-stats-on .ydm-stat--views .stat-content h3 { font-size: clamp(36px, 3.7vw, 56px) !important; }
}

/* Views: growth line */
#stats .ydm-spark {
  position: absolute;
  left: 0;
  top: 27%;
  width: 92%;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
#stats .ydm-spark-line {
  fill: none;
  stroke: #cfe0ff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1; /* pathLength=1 on the element (no vector-effect: it breaks pathLength) */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s var(--ydm-ease);
}
#stats .ydm-spark-area { opacity: 0; transition: opacity 1.2s ease .9s; }
#stats.ydm-drawn .ydm-spark-line { stroke-dashoffset: 0; }
#stats.ydm-drawn .ydm-spark-area { opacity: 1; }
#stats .ydm-spark-dot {
  position: absolute;
  left: calc(92% - 5px);
  top: calc(27% + 40% * .0714 - 5px); /* end of the line: y = 10 / 140 of the chart */
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(156, 192, 255, .25), 0 0 18px 4px rgba(156, 192, 255, .6);
  opacity: 0;
  transition: opacity .6s ease 1.9s;
}
#stats.ydm-drawn .ydm-spark-dot { opacity: 1; animation: ydm-pulse 2.4s ease-in-out 2.4s infinite; }
@keyframes ydm-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(156, 192, 255, .25), 0 0 18px 4px rgba(156, 192, 255, .6); }
  50% { box-shadow: 0 0 0 9px rgba(156, 192, 255, 0), 0 0 22px 6px rgba(156, 192, 255, .45); }
}

/* Artists: avatar stack */
#stats .ydm-avatars {
  position: absolute;
  top: 26px;
  right: 24px;
  z-index: 2;
  display: flex;
}
#stats .ydm-avatars img,
#stats .ydm-avatars span {
  width: 32px;
  height: 32px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #0c3384;
  object-fit: cover;
}
#stats .ydm-avatars span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #2459c4;
}

/* Songs: equalizer */
#stats .ydm-eq {
  position: absolute;
  top: 30px;
  right: 26px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}
#stats .ydm-eq span {
  width: 3px;
  height: 35%;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, #9cc0ff);
  animation: ydm-eq 1.1s ease-in-out infinite alternate paused;
  animation-delay: calc(var(--b) * -.17s);
}
#stats .ydm-eq span:nth-child(3n) { animation-duration: .8s; }
#stats .ydm-eq span:nth-child(3n + 1) { animation-duration: 1.3s; }
#stats.ydm-in .ydm-eq span { animation-play-state: running; }
@keyframes ydm-eq {
  from { height: 18%; }
  to { height: 100%; }
}

/* Countries: faint world map */
#stats.ydm-stats-on .ydm-stat--countries::before {
  content: "";
  display: block !important;
  position: absolute;
  top: -10%;
  right: -6%;
  bottom: -10%;
  left: auto !important;
  width: 70% !important;
  height: auto !important;
  z-index: 0;
  background: url(../img/world-map.svg) center / contain no-repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent);
  mask-image: linear-gradient(to left, #000 40%, transparent);
  transform: none !important;
}

@media (max-width: 767.98px) {
  #stats.stats.ydm-stats-on { padding-block: 64px !important; }
  #stats .ydm-stat--views { min-height: 280px; }
  #stats .ydm-spark { top: 24%; height: 26%; }
  #stats .ydm-spark-dot { top: calc(24% + 26% * .0714 - 5px); }
  #stats .ydm-avatars { top: 20px; right: 16px; }
  #stats .ydm-avatars img, #stats .ydm-avatars span { width: 26px; height: 26px; margin-left: -9px; }
  #stats .ydm-avatars img:nth-child(n + 3) { display: none; }
  #stats .ydm-eq { top: 24px; right: 18px; height: 22px; }
}

/* ---------- Pricing ---------- */
#pricing.pricing::before { opacity: .6; }
#pricing .price-card { padding: 30px; }
#pricing .price-card .card-head .badge-title {
  background: rgba(3, 51, 138, .06);
  border: 1px solid rgba(3, 51, 138, .1);
  color: var(--ydm-accent);
  letter-spacing: .08em;
  font-size: 11px;
}
#pricing .price-card .card-head .title { color: var(--ydm-ink); letter-spacing: -.02em; }
#pricing .price-card .card-head .subtitle { color: var(--ydm-muted); }
#pricing .price-card .price-wrap .price.price-monthly {
  display: inline-flex;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: baseline;
  white-space: nowrap;
  gap: 2px;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ydm-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
#pricing .price-card .price-wrap .price sup {
  top: 0;
  align-self: baseline;
  margin: 0 3px 0 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--ydm-muted);
  -webkit-text-fill-color: currentColor;
}
#pricing .price-card .price-wrap .price .period {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 6px;
}
#pricing .price-card .feature-list { border-top: 1px solid var(--ydm-line); }
#pricing .price-card .feature-list li { color: #3b4760; }
#pricing .price-card .feature-list li i {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  background: rgba(3, 51, 138, .08) !important;
}
#pricing .price-card .feature-list li i::before { content: "\f26e"; } /* bi-check: lighter than check-circle */
/* Other plans get a quiet outline button; the featured plan keeps the solid one. */
#pricing .price-card:not(.featured) .btn-choose {
  background: #fff !important;
  color: var(--ydm-accent) !important;
  border: 1px solid rgba(3, 51, 138, .18) !important;
  box-shadow: none !important;
}
#pricing .price-card:not(.featured) .btn-choose:hover { background: rgba(3, 51, 138, .04) !important; border-color: rgba(3, 51, 138, .32) !important; }
#pricing .price-card:not(.featured) .btn-choose::after { display: none; }

/* Featured plan: deep navy card. */
#pricing .price-card.featured {
  color: #fff;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(122, 167, 255, .28), transparent 60%),
    linear-gradient(180deg, #0a3fa3 0%, #03338a 55%, #022a73 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 2px 4px rgba(3, 51, 138, .2), 0 24px 60px rgba(3, 51, 138, .32) !important;
}
#pricing .price-card.featured::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 45%); }
#pricing .price-card.featured .card-head .badge-title { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
#pricing .price-card.featured .card-head .title,
#pricing .price-card.featured .price-wrap .price.price-monthly { color: #fff; }
#pricing .price-card.featured .card-head .subtitle,
#pricing .price-card.featured .price-wrap .price sup,
#pricing .price-card.featured .price-wrap .price .period { color: rgba(255, 255, 255, .66) !important; -webkit-text-fill-color: currentColor !important; }
#pricing .price-card.featured .feature-list { border-top-color: rgba(255, 255, 255, .14); }
#pricing .price-card.featured .feature-list li { color: rgba(255, 255, 255, .9); }
#pricing .price-card.featured .feature-list li i { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
#pricing .price-card.featured .ribbon {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: none !important;
  color: #fff;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#pricing .price-card.featured .btn-choose {
  background: #fff !important;
  color: var(--ydm-accent) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important;
}
#pricing .price-card.featured .btn-choose::after { background: linear-gradient(105deg, transparent 35%, rgba(3, 51, 138, .08) 50%, transparent 65%); }

/* ---------- Pricing motion (classes added by pricingMotion() in yd-modern.js) ---------- */
@property --ydm-beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#pricing.ydm-pricing-on .row { perspective: 1400px; }
#pricing .ydm-pc {
  opacity: 0;
  transform: translate3d(calc(var(--side) * 70px), 60px, 0) scale(.9);
  transition:
    opacity .7s ease,
    transform 1.1s cubic-bezier(.16, 1.12, .3, 1); /* slight overshoot, like a spring */
  transition-delay: calc(.12s + var(--side) * var(--side) * .14s); /* popular plan first, then the sides */
}
#pricing.ydm-pricing-in .ydm-pc { opacity: 1; transform: none; }
#pricing.ydm-pricing-in .ydm-pc--featured { position: relative; z-index: 2; }
@media (min-width: 992px) {
  /* final resting pose: side plans tilt toward the centre, the popular plan rises */
  #pricing.ydm-pricing-in .ydm-pc:not(.ydm-pc--featured) {
    transform: translateX(calc(var(--side) * 14px)) rotateY(calc(var(--side) * 7deg)) scale(.96);
  }
  #pricing.ydm-pricing-in .ydm-pc--featured { transform: translateY(-18px); }
  #pricing .price-card.featured,
  #pricing .price-card.featured:hover { transform: none !important; } /* old scale(1.04) */
}

/* Rolling digits */
#pricing .ydm-roll { display: inline-flex; align-items: flex-end; font-variant-numeric: tabular-nums; }
#pricing .ydm-roll-final { display: none; }
#pricing .ydm-roll.ydm-done { font-variant-numeric: normal; }
#pricing .ydm-roll.ydm-done .ydm-digit { display: none; }
#pricing .ydm-roll.ydm-done .ydm-roll-final { display: inline; }
#pricing .ydm-digit {
  display: inline-block;
  height: 1.08em;
  line-height: 1.08em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
#pricing .ydm-digit-col {
  display: block;
  white-space: pre;
  text-align: center;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(.2, 1.1, .3, 1);
  transition-delay: calc(.45s + var(--k) * .1s);
}
#pricing.ydm-pricing-in .ydm-digit-col { transform: translateY(calc(var(--n) * -1.08em)); }

/* Feature rows appear one by one */
#pricing .ydm-pc .feature-list li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s ease, transform .6s var(--ydm-ease);
  transition-delay: calc(.7s + var(--li) * .07s);
}
#pricing.ydm-pricing-in .ydm-pc .feature-list li { opacity: 1; transform: none; }

/* Light running around the popular card */
#pricing .price-card > .ydm-beam {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--ydm-beam-a), transparent 0deg 250deg, rgba(156, 192, 255, .9) 300deg, #fff 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ydm-beam 5s linear infinite;
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}
#pricing.ydm-pricing-in .price-card > .ydm-beam { opacity: 1; }
@keyframes ydm-beam { to { --ydm-beam-a: 360deg; } }

/* Shimmer across the Popular badge */
#pricing.ydm-pricing-on .price-card .ribbon { overflow: hidden; }
#pricing.ydm-pricing-on .price-card .ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: ydm-shimmer 3.2s ease-in-out 2s infinite;
}
@keyframes ydm-shimmer {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%); }
}
#pricing.ydm-pricing-on .price-card .ribbon i { animation: ydm-twinkle 3.2s ease-in-out 2s infinite; }
@keyframes ydm-twinkle {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(1.25) rotate(18deg); }
  40% { transform: scale(1) rotate(0); }
}

/* ---------- Services ---------- */
#services.services { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
#services .intro-content .highlight {
  background: rgba(3, 51, 138, .06);
  border: 1px solid rgba(3, 51, 138, .1);
  color: var(--ydm-accent);
  font-size: 12px;
  letter-spacing: .06em;
}
#services .intro-content h2 { color: var(--ydm-ink); letter-spacing: -.03em; }
#services .intro-content p { color: var(--ydm-muted); }
#services .intro-content .stats-wrapper .stat-item .stat-number { color: var(--ydm-ink); letter-spacing: -.03em; }
#services .intro-content .stats-wrapper .stat-item .stat-label { color: var(--ydm-muted); }
@media (min-width: 992px) {
  #services .intro-content { position: sticky; top: 120px; }
}
#services .service-card { padding: 30px; }
#services .service-card .icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(3, 51, 138, .06) !important;
  box-shadow: none !important;
  transform: none !important;
}
#services .service-card .icon-wrapper i { font-size: 20px; color: var(--ydm-accent) !important; }
#services .service-card:hover .icon-wrapper { background: var(--ydm-accent) !important; }
#services .service-card:hover .icon-wrapper i { color: #fff !important; }
#services .service-card h3 { color: var(--ydm-ink); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
#services .service-card p { color: var(--ydm-muted); }
#services .service-card .read-more { font-weight: 500; font-size: 14px; }

/* ---------- Features: bento grid (21st "Bento Grid") ---------- */
#features .yd-spot,
#features .feature-card .beam,
#features .feature-card .glow-ring { display: none !important; }
#features .yd-orbs { opacity: .4; }
#features .container > .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}
#features .container > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; }
@media (min-width: 768px) {
  #features .container > .row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  #features .container > .row > :nth-child(1),
  #features .container > .row > :nth-child(6),
  #features .container > .row > :nth-child(7),
  #features .container > .row > :nth-child(12) { grid-column: span 2; }
}
@media (min-width: 1200px) {
  #features .container > .row { grid-template-columns: repeat(4, 1fr); }
}
#features .feature-card {
  height: 100%;
  padding: 28px !important;
  transform: none !important;
}
#features .container > .row > :nth-child(1) .feature-card,
#features .container > .row > :nth-child(6) .feature-card,
#features .container > .row > :nth-child(7) .feature-card,
#features .container > .row > :nth-child(12) .feature-card {
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(47, 111, 224, .08), transparent 60%),
    #fff !important;
}
#features .feature-card .feature-num {
  top: 22px;
  right: 24px;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  color: rgba(11, 27, 63, .28) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  opacity: 1 !important;
  transform: none !important;
}
#features .feature-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(3, 51, 138, .06) !important;
  box-shadow: none !important;
  transform: none !important;
}
#features .feature-icon::before { display: none !important; }
#features .feature-icon i { color: var(--ydm-accent) !important; font-size: 19px; }
#features .feature-card:hover .feature-icon { background: var(--ydm-accent) !important; }
#features .feature-card:hover .feature-icon i { color: #fff !important; }
#features .feature-card h3 { color: var(--ydm-ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 18px; }
#features .feature-card p { color: var(--ydm-muted); font-size: 14px; margin-bottom: 0; }

/* ---------- Security: removed from the page at the owner's request ----------
   Hidden rather than deleted: the admin publisher requires the security.body marker in index.html.
   The particle canvas inside only animates while visible, so it stays idle. */
#security.yd-security { display: none !important; }

/* (kept in case the section is shown again) */
#security .sec-card {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#security .sec-card:hover { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .16) !important; }
#security .sec-icon {
  background: rgba(122, 167, 255, .12) !important;
  border: 1px solid rgba(122, 167, 255, .22);
  box-shadow: none !important;
  transform: none !important;
}
#security .sec-icon i { color: #a9c6ff !important; }

/* ---------- Testimonials: scrolling columns (21st "Testimonials Columns") ---------- */
#testimonials .ydm-tcols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 18px;
  max-height: 680px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
#testimonials .ydm-ttrack {
  display: flex;
  flex-direction: column;
  animation: ydm-tscroll var(--dur, 40s) linear infinite;
}
#testimonials .ydm-tcol:hover .ydm-ttrack,
#testimonials.ydm-offscreen .ydm-ttrack { animation-play-state: paused; }
@keyframes ydm-tscroll { to { transform: translateY(-50%); } }
#testimonials .ydm-tcols .testimonial-item { margin: 0 0 18px !important; opacity: 1 !important; transform: none !important; }
#testimonials .testimonial-content {
  background: #fff !important;
  border: 1px solid var(--ydm-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--ydm-shadow-sm) !important;
  padding: 26px !important;
  transform: none !important;
}
#testimonials .testimonial-content .quote-pattern {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: 10px;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0;
  justify-content: flex-start;
  opacity: 1;
}
#testimonials .testimonial-content .quote-pattern::before,
#testimonials .testimonial-content .quote-pattern::after { display: none !important; }
#testimonials .testimonial-content .quote-pattern i { font-size: 26px; line-height: 1; color: rgba(3, 51, 138, .25) !important; }
#testimonials .testimonial-content p { color: #3b4760; font-size: 15px; margin-bottom: 20px; }
#testimonials .client-info { gap: 12px; padding-top: 16px; border-top: 1px solid var(--ydm-line); }
#testimonials .client-image img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#testimonials .client-details h3 { font-size: 15px; font-weight: 600; color: var(--ydm-ink); margin: 0; }
#testimonials .client-details .position { font-size: 13px; color: var(--ydm-muted); }

/* ---------- FAQ: accordion (classes added by yd-modern.js) ---------- */
#faq.faq { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
#faq.ydm-faq .container:not(.section-title) { max-width: 880px; }
#faq.ydm-faq .faq-item {
  display: block;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--ydm-line) !important;
  border-radius: 16px;
  box-shadow: var(--ydm-shadow-sm);
  transition: box-shadow .3s ease, border-color .3s ease;
}
#faq.ydm-faq .faq-item.is-open { border-color: rgba(3, 51, 138, .16) !important; box-shadow: var(--ydm-shadow-md); }
#faq.ydm-faq .faq-item > [class*="col-"] { width: 100%; max-width: none; padding: 0; }
#faq.ydm-faq .ydm-faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px !important;
  cursor: pointer;
  user-select: none;
  border-radius: 16px;
}
#faq.ydm-faq .ydm-faq-q i.bi { color: var(--ydm-accent); font-size: 18px; margin: 0; padding: 0; position: static; }
#faq.ydm-faq .ydm-faq-q h4 { flex: 1; margin: 0; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--ydm-ink); }
#faq.ydm-faq .ydm-faq-q::after {
  content: "\f282";
  font-family: "bootstrap-icons";
  font-size: 14px;
  color: var(--ydm-muted);
  transition: transform .35s var(--ydm-ease);
}
#faq.ydm-faq .is-open .ydm-faq-q::after { transform: rotate(180deg); }
#faq.ydm-faq .ydm-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 22px 0 54px !important;
  transition: grid-template-rows .4s var(--ydm-ease);
}
#faq.ydm-faq .is-open .ydm-faq-a { grid-template-rows: 1fr; }
#faq.ydm-faq .ydm-faq-inner { min-height: 0; overflow: hidden; }
#faq.ydm-faq .ydm-faq-inner::after { content: ""; display: block; height: 20px; }
#faq.ydm-faq .ydm-faq-inner p { color: var(--ydm-muted); margin: 0; }
#faq.ydm-faq .faq-btns { margin-top: 14px; }
#faq.ydm-faq .faq-btn { border-radius: 999px; box-shadow: none; font-weight: 500; }
@media (max-width: 575px) {
  #faq.ydm-faq .ydm-faq-q { padding: 16px !important; gap: 10px; }
  #faq.ydm-faq .ydm-faq-q h4 { font-size: 15px; }
  #faq.ydm-faq .ydm-faq-a { padding: 0 16px !important; }
}

/* ---------- Contact: one split card — navy info panel on the left, form on the right ---------- */
#contact > .container:not(.section-title) { max-width: 1120px; }
#contact > .container > .row {
  --bs-gutter-x: 0;
  margin: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--ydm-line);
  border-radius: 28px;
  box-shadow: var(--ydm-shadow-md);
}
#contact .contact-info { height: 100%; margin: 0 !important; }
#contact .contact-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 100%;
  min-height: 100%;
  padding: 36px 32px !important;
  color: #fff;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transform: none !important;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(122, 167, 255, .35), rgba(122, 167, 255, 0) 60%),
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px) 0 0 / 20px 20px,
    linear-gradient(160deg, #0a3fa3 0%, #03338a 45%, #021d57 100%) !important;
}
#contact .contact-card::before { display: none !important; }
#contact .contact-card::after { /* soft ring of light in the bottom corner */
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02);
}
#contact .contact-card h3 { color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 28px; }
#contact .contact-card h3::after { display: none; }
#contact .contact-card .contact-details .contact-item { gap: 14px; margin-bottom: 22px; align-items: center; }
#contact .contact-card .contact-details .contact-item i { margin: 0 !important; }
#contact .contact-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff !important;
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .16);
}
#contact .contact-item h4 { color: rgba(255, 255, 255, .62) !important; font-size: 13px !important; font-weight: 500; margin-bottom: 2px; }
#contact .contact-item p { color: #fff !important; font-size: 15px !important; font-weight: 500; overflow-wrap: anywhere; }
#contact .contact-card .social-links { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
#contact .contact-card .social-links a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff !important;
}
#contact .contact-card .social-links a:hover { background: #fff !important; color: var(--ydm-accent) !important; }

#contact .contact-form-wrapper {
  height: 100%;
  padding: 34px 32px 30px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#contact .contact-form-wrapper::before { display: none !important; }
#contact label { font-size: 13px; font-weight: 500; color: #3b4760; margin-bottom: 8px; }
/* Field label icons (Bootstrap Icons glyphs): person, envelope, tag, pencil-square */
#contact .php-email-form label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#contact .php-email-form label::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-family: "bootstrap-icons";
  font-size: 12px;
  line-height: 1;
  color: var(--ydm-accent);
  background: rgba(3, 51, 138, .07);
}
#contact .php-email-form label[for="name"]::before { content: "\f4e1"; }
#contact .php-email-form label[for="email"]::before { content: "\f32f"; }
#contact .php-email-form label[for="subject"]::before { content: "\f5b0"; }
#contact .php-email-form .form-group:has(textarea) label::before { content: "\f4ca"; }
#contact .php-email-form .form-group:focus-within label::before { color: #fff; background: var(--ydm-accent); }
#contact .php-email-form .form-control {
  min-height: 50px;
  border-radius: 12px !important;
  background: #f5f7fb !important;
  border: 1px solid transparent !important;
  font-size: 15px;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#contact .php-email-form .form-control:hover { background: #eff3f9 !important; }
#contact .php-email-form .form-control:focus {
  background: #fff !important;
  border-color: rgba(3, 51, 138, .4) !important;
  box-shadow: 0 0 0 4px rgba(3, 51, 138, .08) !important;
}
#contact .php-email-form .form-control::placeholder { color: #9aa5b8; }
#contact .php-email-form textarea.form-control { min-height: 150px; }
#contact .php-email-form .text-center { text-align: left !important; }
#contact .php-email-form button[type="submit"] { width: 100%; min-height: 52px; }

@media (max-width: 991.98px) {
  #contact > .container > .row { padding: 8px; border-radius: 24px; }
  #contact .contact-card { padding: 30px 24px !important; }
  #contact .contact-form-wrapper { padding: 28px 18px 20px !important; }
  #contact .contact-item p { font-size: 13.5px !important; }
}

/* ---------- Footer: black with white text and icons — icon headings, icon links, bottom bar (added by yd-modern.js) ---------- */
#footer.footer {
  --background-color: #0a0a0b;
  --default-color: rgba(255, 255, 255, .7);
  --heading-color: #fff;
  color: rgba(255, 255, 255, .7);
  background: #0a0a0b !important;
  border-top: 0;
  padding: 0 !important;
}
#footer.footer::before,
#footer.footer::after { display: none !important; }
#footer.footer .footer-main { padding: 72px 0 48px; }

/* Brand column */
#footer.footer .footer-about .yd-footer-logo {
  max-width: 170px;
  height: auto;
  filter: brightness(0) invert(1) !important;
  opacity: 1;
}
#footer.footer .footer-about p { color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.85; max-width: 360px; }
#footer.footer .footer-about .social-links h5 { display: none; }
#footer.footer .social-icons { display: flex; gap: 10px; }
#footer.footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 15px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
#footer.footer .social-icons a:hover { background: #fff !important; border-color: #fff; color: #0a0a0b !important; }

/* Column headings: small, spaced capitals with an icon */
#footer.footer .footer-widget h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff !important;
}
#footer.footer .footer-widget h4::after { display: none !important; }
#footer.footer .footer-widget h4 i {
  display: inline-flex !important;
  margin: 0 !important;
  font-size: 15px;
  color: #fff !important;
  -webkit-text-fill-color: currentColor;
  background: none !important;
}

/* Links with icons */
#footer.footer .footer-links,
#footer.footer .footer-links li { padding-left: 0 !important; margin-left: 0; list-style: none; }
#footer.footer .footer-links li { margin-bottom: 4px; }
#footer.footer .footer-links li::before,
#footer.footer .footer-links li::after,
#footer.footer .footer-links a::before,
#footer.footer .footer-links a::after { display: none !important; }
#footer.footer .footer-links a {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  padding: 7px 0 !important;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7) !important;
  transform: none !important;
  transition: color .25s ease;
}
#footer.footer .footer-links a i {
  display: inline-flex !important;
  width: 16px;
  margin: 0 !important;
  font-size: 15px;
  color: #fff !important;
  background: none !important;
  transform: none !important;
  transition: color .25s ease, transform .3s var(--ydm-ease);
}
#footer.footer .footer-links a:hover { color: #fff !important; }
#footer.footer .footer-links a:hover i { color: #fff !important; transform: translateX(2px) !important; }

/* Contact column */
#footer.footer .footer-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
  transform: none !important;
}
#footer.footer .footer-contact .contact-item i {
  width: 16px;
  margin: 3px 0 0 !important;
  font-size: 15px;
  color: #fff !important;
  background: none !important;
  box-shadow: none !important;
}

/* Bottom bar */
#footer.footer .ydm-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 24px 0 28px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .55);
}
#footer.footer .ydm-footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
#footer.footer .ydm-footer-bottom nav { display: flex; gap: 22px; }
#footer.footer .ydm-footer-bottom a { color: rgba(255, 255, 255, .55); transition: color .25s ease; }
#footer.footer .ydm-footer-bottom a:hover { color: #fff; }
#footer.footer .footer-contact { padding-top: 7px; }
#footer.footer .footer-contact .contact-item span { color: rgba(255, 255, 255, .7) !important; }
#footer.footer .footer-main,
#footer.footer .footer-widget,
#footer.footer .footer-about { text-align: left !important; }
#footer.footer .footer-about .logo { justify-content: flex-start !important; }
#footer.footer .social-icons,
#footer.footer .footer-contact .contact-item { justify-content: flex-start !important; }
@media (max-width: 767.98px) {
  #footer.footer .footer-main { padding: 52px 0 28px; }
  #footer.footer .footer-main .row > [class*="col-"] { margin-bottom: 8px; }
  #footer.footer .ydm-footer-bottom .container { flex-direction: column; align-items: flex-start; }
}

/* ---------- Footer, premium pass: rounded card, navy glow, CTA band, oversized wordmark ---------- */
#footer.footer {
  margin: 0 12px 12px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(47, 111, 224, .28), rgba(47, 111, 224, 0) 70%),
    radial-gradient(40% 35% at 100% 100%, rgba(47, 111, 224, .12), rgba(47, 111, 224, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px) 0 0 / 22px 22px,
    #070a12 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
#footer.footer .footer-main { padding: 56px 0 40px; }

/* CTA band */
#footer .ydm-footer-cta { padding: 64px 0 52px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#footer .ydm-footer-cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
}
#footer .ydm-footer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a9c6ff;
  background: rgba(122, 167, 255, .1);
  border: 1px solid rgba(122, 167, 255, .2);
}
#footer .ydm-footer-cta h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: #fff;
}
#footer .ydm-footer-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#footer .ydm-btn-light,
#footer .ydm-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: transform .3s var(--ydm-ease), background .3s ease, color .3s ease, box-shadow .3s ease;
}
#footer .ydm-btn-light { color: #070a12; background: #fff; box-shadow: 0 10px 30px -8px rgba(122, 167, 255, .55); }
#footer .ydm-btn-light:hover { color: #070a12; transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(122, 167, 255, .75); }
#footer .ydm-btn-light i { transition: transform .3s var(--ydm-ease); }
#footer .ydm-btn-light:hover i { transform: translateX(3px); }
#footer .ydm-btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
#footer .ydm-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }

/* Calmer link styling: icons dimmer than the text */
#footer.footer .footer-links a i,
#footer.footer .footer-contact .contact-item i { color: rgba(255, 255, 255, .42) !important; }
#footer.footer .footer-links a:hover i { color: #fff !important; }
#footer.footer .footer-widget h4 i { color: #7aa7ff !important; }

/* Oversized wordmark */
#footer .ydm-footer-word {
  margin: 8px 0 -0.16em;
  padding: 0 12px;
  font-size: 11.4vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  pointer-events: none;
}
#footer.footer .ydm-footer-bottom { border-top-color: rgba(255, 255, 255, .08); }

@media (max-width: 767.98px) {
  #footer.footer { margin: 0 8px 8px; border-radius: 24px; }
  #footer .ydm-footer-cta { padding: 44px 0 36px; }
  #footer .ydm-footer-cta-actions { width: 100%; }
  #footer .ydm-btn-light, #footer .ydm-btn-ghost { flex: 1 1 100%; justify-content: center; }
}

/* Footer accordion on phones (markup added by yd-modern.js) */
#footer.footer .ydm-facc-chev { display: none !important; }
@media (max-width: 767.98px) {
  #footer.footer .footer-main .row > .ydm-facc-col { margin-top: 0; margin-bottom: 0; }
  #footer.footer .footer-about { margin-bottom: 20px; }
  #footer.footer .footer-widget.ydm-facc { margin-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  #footer.footer .ydm-facc-col.is-last .ydm-facc { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  #footer.footer .ydm-facc h4 {
    margin: 0;
    padding: 18px 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #footer.footer .ydm-facc h4:focus-visible { outline: 2px solid #7aa7ff; outline-offset: 2px; border-radius: 6px; }
  #footer.footer .ydm-facc .ydm-facc-chev {
    display: inline-flex !important;
    margin-left: auto !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, .6) !important;
    transition: transform .3s var(--ydm-ease);
  }
  #footer.footer .ydm-facc.is-open .ydm-facc-chev { transform: rotate(180deg); }
  #footer.footer .ydm-facc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ydm-ease); }
  #footer.footer .ydm-facc.is-open .ydm-facc-body { grid-template-rows: 1fr; }
  #footer.footer .ydm-facc-inner { min-height: 0; overflow: hidden; }
  #footer.footer .ydm-facc-inner > :first-child { margin-top: 0; padding-top: 0; }
  #footer.footer .ydm-facc-inner::after { content: ""; display: block; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #footer.footer .ydm-facc-body,
  #footer.footer .ydm-facc-chev { transition: none !important; }
}

.scroll-top {
  border-radius: 12px !important;
  background: rgba(3, 51, 138, .92) !important;
  box-shadow: 0 8px 22px rgba(3, 51, 138, .25) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  #testimonials .ydm-ttrack { animation: none !important; }
}