:root {
  /* Page surfaces */
  --bg-page: #f7f8fb;
  --surface-0: #ffffff;
  --surface-1: #f1f3f7;
  --surface-2: #e9ecf2;
  --line: rgba(16, 24, 40, 0.09);

  /* Text (on light surfaces) */
  --text-primary: #101a2b; /* near-navy, from logo */
  --text-muted: #101a2b;
  --text-faint: #8892a0;

  /* Dark navy — used for footer + header only, not the page body */
  --navy-950: #0b1220;
  --navy-900: #101a2f;
  --navy-800: #16233d;
  --navy-line: rgba(255, 255, 255, 0.09);
  --navy-text-muted: #a8b0c2;
  --navy-text-faint: #707b93;

  /* Brand accent */
  --accent: #2563eb;
  --accent-rgb: 37, 99, 235;
  --accent-soft: rgba(var(--accent-rgb), 0.1);
  --accent-line: rgba(var(--accent-rgb), 0.35);
  --accent-light: #7da7ff;
  --accent-bright: #60a5fa;

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container-max: 1240px;
  --space-section: clamp(64px, 8vw, 120px);
  --radius-md: 14px;
  --radius-lg: 22px;
  --pt-perspective: 1200px;

  /* Header height — used to offset fixed-position hero content on mobile */
  --header-h-mobile: 88px;
  --header-h-mobile-sm: 100px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* Shadows — neutral, not accent-colored (colored shadows read muddy on white) */
  --shadow-sm: 0 6px 16px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 16px 34px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 26px 54px rgba(16, 24, 40, 0.16);
}

/* Blue preview for the home page only. */
body.index-page {
  --accent: #2563eb;
  --accent-rgb: 37, 99, 235;
  --accent-light: #7da7ff;
  --accent-bright: #60a5fa;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-med: 0.001s;
    --dur-slow: 0.001s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* --------------------------------------------------------------------------
   1. WEB FONTS
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap");

/* --------------------------------------------------------------------------
   2. GLOBAL BASE
   -------------------------------------------------------------------------- */
body {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

p,
li,
span {
  font-family: var(--font-body);
}

a {
  color: var(--accent);
}

::selection {
  background: var(--accent);
  color: #fff;
}

.container {
  max-width: var(--container-max);
}

section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

#home.no-padding {
  padding: 0 !important;
  position: relative;
}

/* --------------------------------------------------------------------------
   3. HEADER — light glass, navy text
   -------------------------------------------------------------------------- */
#header.header,
.navbar-fixed-top.header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

body.index-page #header.header {
  border-top: 5px solid var(--accent) !important;
}

body.index-page .navbar-toggle {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

body.index-page .navbar-toggle .icon-bar {
  background: #fff !important;
}

.navbar-brand img {
  transition: transform var(--dur-fast) var(--ease-out);
}
.navbar-brand:hover img {
  transform: scale(1.04);
}

.navbar-nav > li > a {
  position: relative;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}

.navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur-fast) var(--ease-out);
}

.navbar-nav > li:hover > a {
  color: var(--accent) !important;
}
.navbar-nav > li:hover > a::after {
  width: 100%;
}

.dropdown-menu {
  background: var(--surface-0) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  display: block !important;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 1400px) {
  .dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
}

.dropdown-menu ul li a {
  color: var(--text-muted) !important;
  padding: 10px 20px;
  transition:
    color var(--dur-fast),
    padding-left var(--dur-fast);
}

.dropdown-menu ul li a:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  padding-left: 26px;
}

.cd-hero {
  position: relative;
  overflow: hidden;
}

.cd-hero-slider li .overlay2 {
  position: relative;
  overflow: hidden;
}

.cd-hero-slider li .overlay2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(var(--accent-rgb), 0.25),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      rgba(11, 18, 32, 0.45) 0%,
      rgba(11, 18, 32, 0.82) 100%
    );
  pointer-events: none;
}

.cd-hero-slider li .overlay2 img {
  animation: kenburns 18s ease-in-out infinite alternate;
  will-change: transform;
}
/* Center the hero content + Salesforce card once the columns stack
   below the Bootstrap md breakpoint (992px) — col-md-5/col-md-7 lose
   their float here but aren't reliably centered on their own. */
@media (max-width: 991px) {
  .saleforce-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .saleforce-wrapper .col-md-7,
  .saleforce-wrapper .col-md-5 {
    float: none !important;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .salesforce-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

@keyframes kenburns {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.12) translate3d(-1%, -1%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-hero-slider li .overlay2 img {
    animation: none;
  }
}

/* Scoped to .selected — this is the fix */
.cd-hero-slider li.selected .cd-full-width h1,
.cd-hero-slider li.selected .cd-half-width h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  text-transform: none;
  line-height: 1.15;
  margin-top: 30px;
  color: #fff !important;
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp var(--dur-slow) var(--ease-out) 0.15s forwards;
}

.cd-hero-slider li.selected .cd-full-width p {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp var(--dur-slow) var(--ease-out) 0.35s forwards;
}

.cd-hero-slider li.selected .cd-full-width .cd-btn,
.cd-hero-slider li.selected .cd-half-width .cd-btn {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp var(--dur-slow) var(--ease-out) 0.55s forwards;
}

.cd-hero-slider li.selected .cd-btn {
  transition: background-color 0.2s ease;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Non-selected slides: force-hide so nothing can visually stack even if
   the base template's own slider script is slow to toggle on first paint */
.cd-hero-slider li:not(.selected) {
  opacity: 0;
  pointer-events: none;
}

/* FIX: fixed header overlap on small screens.
   #header is navbar-fixed-top (position:fixed), so it floats on top of the
   hero content instead of pushing it down. When the "WELCOME TO PRATYIN"
   heading wraps to two lines on narrow viewports, the first line lands
   underneath the header and gets visually swallowed by it. Push the hero
   text content down by the header's real rendered height on small screens. */
@media (max-width: 767px) {
  .cd-hero-slider li .cd-full-width,
  .cd-hero-slider li .cd-half-width {
    padding-top: var(--header-h-mobile);
    box-sizing: border-box;
  }
}

@media (max-width: 375px) {
  .cd-hero-slider li .cd-full-width,
  .cd-hero-slider li .cd-half-width {
    padding-top: var(--header-h-mobile-sm);
  }
}

/* Buttons */
.btn.btn-primary.cd-btn,
.btn.btn-primary {
  border-radius: 999px !important;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 30px !important;
  border: 1px solid transparent !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.hero-cta-group .cd-btn,
.hero-cta-group .btn {
  margin: 0 !important;
}

.hero-cta-group .cd-btn:nth-of-type(2),
.hero-cta-group .btn:nth-of-type(2) {
  margin-left: 0 !important;
}

.btn.btn-primary.solid,
.btn.btn-primary.white {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.35);
}

.btn.btn-primary.solid:hover,
.btn.btn-primary.white:hover,
.btn.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 32px rgba(var(--accent-rgb), 0.42);
}

.btn.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
}

/* Salesforce card in hero — glass-on-photo, stays legible regardless of
   overall theme since it sits on the photographic hero background */
.salesforce-card {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    rgba(16, 26, 43, 0.75),
    rgba(16, 26, 43, 0.55)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp var(--dur-slow) var(--ease-out) 0.45s forwards;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.salesforce-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(var(--accent-rgb), 0.12);
}

/* animated shine sweep on hover */
.salesforce-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 2;
}

.salesforce-card:hover::before {
  left: 130%;
}

/* small "Certified Partner" tag, top-right corner */
.salesforce-badge-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

/* logo gets a soft glowing ring and a gentle idle float */
.salesforce-image-wrapper {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin: 8px auto 20px;
  padding: 10px;
  border-radius: 16px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08),
    transparent 70%
  );
  animation: sfLogoFloat 4s ease-in-out infinite;
}

@keyframes sfLogoFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.salesforce-card h3 {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-size: 19px;
  margin-bottom: 10px;
}

.salesforce-card p {
  color: rgba(255, 255, 255, 0.78) !important;
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.salesforce-card-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  transition: gap var(--dur-fast) var(--ease-out);
}

.salesforce-card-cta:hover {
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .salesforce-image-wrapper {
    animation: none;
  }
  .salesforce-card::before {
    display: none;
  }
}

.cd-slider-nav ul li a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.cd-slider-nav ul li a:hover,
.cd-slider-nav ul li.selected a {
  color: var(--accent) !important;
}
.cd-marker {
  background: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   5. AMBIENT BLOBS — softened for light background
   -------------------------------------------------------------------------- */
.pt-blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.pt-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.16;
  animation: pt-float 14s ease-in-out infinite;
}

.pt-blob.pt-blob-a {
  background: var(--accent);
  top: -120px;
  left: -80px;
}
.pt-blob.pt-blob-b {
  background: #0f2a55;
  bottom: -140px;
  right: -100px;
  width: 500px;
  height: 500px;
  animation-delay: -6s;
}
.pt-blob.pt-blob-c {
  background: var(--accent-light);
  top: 40%;
  left: 50%;
  width: 320px;
  height: 320px;
  animation-delay: -10s;
}

@keyframes pt-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, -30px) scale(1.08);
  }
  66% {
    transform: translate(-30px, 25px) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-blob {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
  6. INFO / STATS BAND — light cards, restrained interaction
   -------------------------------------------------------------------------- */
.pt-stats {
  position: relative;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
  z-index: 1;
}

.pt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pt-stat-card {
  min-width: 0;
}

.pt-stat-card-inner {
  min-height: 0;
  padding: 0 10px;
  text-align: center;
}

.pt-stat-icon {
  display: flex;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-0);
  box-shadow: var(--shadow-sm);
  font-size: 24px;
  color: var(--accent);
  line-height: 1;
}

.pt-stat-number {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  display: block;
}

.pt-stat-label {
  color: #101a2b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 5px auto 0;
  max-width: 190px;
  display: block;
}

/* --------------------------------------------------------------------------
  7. SPECIALIZED SERVICES — light icon list
   -------------------------------------------------------------------------- */
.pt-specialized-services {
  position: relative;
  z-index: 1;
  background: var(--bg-page);
  padding: clamp(72px, 8vw, 96px) 0;
}

.pt-section-eyebrow {
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pt-specialized-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.pt-specialized-title {
  color: var(--text-primary);
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  text-align: center;
}

.pt-specialized-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 60px;
}

.pt-specialized-column {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.pt-specialized-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px);
  animation: pt-specialized-item-in 0.6s var(--ease-out) forwards;
}

.pt-specialized-column-right .pt-specialized-item {
  flex-direction: row;
  text-align: left;
}

.pt-specialized-column .pt-specialized-item:nth-child(1) {
  animation-delay: 0.05s;
}
.pt-specialized-column .pt-specialized-item:nth-child(2) {
  animation-delay: 0.13s;
}
.pt-specialized-column .pt-specialized-item:nth-child(3) {
  animation-delay: 0.21s;
}
.pt-specialized-column .pt-specialized-item:nth-child(4) {
  animation-delay: 0.29s;
}

@keyframes pt-specialized-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pt-specialized-icon {
  display: flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  color: #fff;
  font-size: 30px;
}

.pt-specialized-item h3 {
  color: var(--text-primary);
  font-family: var(--font-display) !important;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}

.pt-specialized-item p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.pt-specialized-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  transition: gap var(--dur-fast) var(--ease-out);
}

.pt-specialized-column-right .pt-specialized-item a {
  flex-direction: row;
}
.pt-specialized-item:hover a {
  gap: 10px;
}

.pt-index-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.pt-index-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pt-index-stagger-1.is-visible {
  transition-delay: 0.05s;
}
.pt-index-stagger-2.is-visible {
  transition-delay: 0.15s;
}
.pt-index-stagger-3.is-visible {
  transition-delay: 0.25s;
}
.pt-index-stagger-4.is-visible {
  transition-delay: 0.35s;
}

.pt-specialized-photo-wrap {
  position: relative;
  align-self: center;
  width: 100%;
}
.pt-specialized-photo-glow {
  position: absolute;
  inset: -24px;
  z-index: 0;
  background: radial-gradient(
    circle at 30% 20%,
    var(--accent-soft),
    transparent 60%
  );
  border-radius: 50%;
  filter: blur(10px);
}
.pt-specialized-orbit {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(var(--accent-rgb), 0.14),
      transparent 60%
    ),
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
}

.pt-specialized-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--navy-950);
}

.pt-specialized-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  opacity: 0.5;
}

.pt-specialized-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pt-specialized-orbit-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.pt-specialized-orbit-spokes line {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.5;
}

.pt-specialized-orbit-pulses line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 11;
  animation: pt-specialized-spoke-flow 1.1s linear infinite;
}

@keyframes pt-specialized-spoke-flow {
  to {
    stroke-dashoffset: -32px;
  }
}

.pt-specialized-orbit-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 73.3%;
  height: 55%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  mask-image: radial-gradient(circle, transparent 62%, #000 63%, #000 100%);
}

.pt-specialized-orbit-sweep::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--accent-rgb), 0.55),
    transparent 28%,
    transparent 100%
  );
  animation: pt-specialized-sweep-spin 5s linear infinite;
}

@keyframes pt-specialized-sweep-spin {
  to {
    transform: rotate(360deg);
  }
}

.pt-specialized-orbit-hub {
  position: absolute;
  top: 42.5%;
  left: 50%;
  z-index: 3;
  display: flex;
  width: 22.7%;
  height: 17%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent));
  box-shadow:
    0 0 0 6px rgba(var(--accent-rgb), 0.14),
    0 14px 30px rgba(var(--accent-rgb), 0.35);
  animation: pt-specialized-hub-pulse 3s ease-in-out infinite;
}

.pt-specialized-orbit-hub strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.pt-specialized-orbit-hub span {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 3px;
  text-transform: uppercase;
}

@keyframes pt-specialized-hub-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.pt-specialized-orbit-node {
  position: absolute;
  z-index: 4;
  display: flex;
  width: 15%;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  color: var(--accent);
  font-size: 14px;
  animation: pt-specialized-node-float 3.6s ease-in-out infinite;
}

.pt-specialized-orbit-node:nth-of-type(odd) {
  animation-delay: 0.4s;
}

@keyframes pt-specialized-node-float {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -6px;
  }
}

@media (max-width: 900px) {
  .pt-specialized-services {
    padding: 64px 0 72px;
  }
  .pt-specialized-grid {
    grid-template-columns: 1fr;
    margin-top: 44px;
    gap: 36px;
  }
  .pt-specialized-column {
    gap: 30px;
  }
  .pt-specialized-photo-wrap {
    order: -1;
    max-width: 320px;
    margin: 0 auto 20px;
  }
  .pt-specialized-column-right .pt-specialized-item {
    flex-direction: row;
    text-align: left;
  }
  .pt-specialized-column-right .pt-specialized-item a {
    flex-direction: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-specialized-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pt-specialized-orbit-pulses line,
  .pt-specialized-orbit-sweep::before,
  .pt-specialized-orbit-hub,
  .pt-specialized-orbit-node,
  .pt-index-reveal {
    animation: none;
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.pt-services .pt-section-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.pt-section-title {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 14px;
}

.pt-services .pt-section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary) !important;
}

.pt-section-sub {
  color: #101a2b;
  max-width: 560px;
  margin-bottom: 48px;
}

.pt-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.pt-service-card {
  perspective: var(--pt-perspective);
}

.pt-service-card-inner {
  position: relative;
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  height: 100%;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.pt-service-card:nth-child(3n + 1):hover .pt-service-card-inner {
  transform: rotateX(6deg) rotateY(10deg) translateY(-8px) translateZ(12px);
}
.pt-service-card:nth-child(3n + 2):hover .pt-service-card-inner {
  transform: rotateX(-6deg) rotateY(-4deg) translateY(-8px) translateZ(12px);
}
.pt-service-card:nth-child(3n + 3):hover .pt-service-card-inner {
  transform: rotateX(4deg) rotateY(-10deg) translateY(-8px) translateZ(12px);
}

.pt-service-card:hover .pt-service-card-inner {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}

.pt-service-card-inner::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}

.pt-service-card:hover .pt-service-card-inner::before {
  opacity: 1;
}

.pt-service-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 22px;
  transform: translateZ(30px);
  transition: transform var(--dur-med) var(--ease-out);
}

.pt-service-card:hover .pt-service-icon {
  transform: translateZ(50px) rotate(-8deg) scale(1.08);
}

.pt-service-card-inner h3 {
  font-family: var(--font-display) !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  transform: translateZ(20px);
}

.pt-service-card-inner p {
  color: #101a2b !important;
  font-size: 15.5px;
  line-height: 1.6;
  transform: translateZ(15px);
  margin-bottom: 18px;
}

.pt-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  transform: translateZ(15px);
  transition: gap var(--dur-fast) var(--ease-out);
}

.pt-service-card:hover .pt-service-link {
  gap: 10px;
}

/* --------------------------------------------------------------------------
   8. LOGO MARQUEE — light strip, fades to page bg
   -------------------------------------------------------------------------- */
.pt-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
  padding: 28px 0;
  z-index: 1;
}

.pt-marquee::before,
.pt-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.pt-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface-1), transparent);
}
.pt-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface-1), transparent);
}

.pt-marquee-track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: pt-marquee-scroll 26s linear infinite;
}

.pt-marquee-track span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-muted);
  white-space: nowrap;
}

.pt-marquee-track span i {
  color: var(--accent);
}

@keyframes pt-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-marquee-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   9. DARK-NAVY FOOTER (deliberate contrast against the light page)
   -------------------------------------------------------------------------- */
.pt-footer {
  position: relative;
  background: var(--navy-950);
  padding: 72px 0 0;
  overflow: hidden;
  z-index: 1;
}

.pt-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}

.pt-footer-brand img {
  height: 34px;
  margin-bottom: 16px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
}

.pt-footer-brand p {
  color: var(--navy-text-muted) !important;
  font-size: 14px;
  line-height: 1.7;
  max-width: 300px;
}

.pt-footer-col h4 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 18px;
}

.pt-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pt-footer-col ul li {
  margin-bottom: 12px;
}

.pt-footer-col ul li a {
  color: var(--navy-text-muted) !important;
  font-size: 14px;
  transition:
    color var(--dur-fast) var(--ease-out),
    padding-left var(--dur-fast) var(--ease-out);
}

.pt-footer-col ul li a:hover {
  color: var(--accent) !important;
  padding-left: 6px;
}

.pt-footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--navy-text-muted);
  font-size: 14px;
}
.pt-footer-contact li i {
  color: var(--accent);
  margin-top: 3px;
}
.pt-footer-contact li a {
  color: var(--navy-text-muted) !important;
}
.pt-footer-contact li a:hover {
  color: var(--accent) !important;
}

.pt-footer-social {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.pt-footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  color: var(--navy-text-muted) !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.pt-footer-social a:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  color: var(--accent) !important;
}

.pt-footer-bottom {
  border-top: 1px solid var(--navy-line);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.pt-footer-bottom p {
  color: var(--navy-text-faint) !important;
  font-size: 13px;
  margin: 0;
}

.pt-footer-certs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pt-footer-certs img {
  height: 60px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.pt-footer-certs img:hover {
  transform: translateY(-3px);
}

/* Back-to-top: fixed position, styled once, no duplication risk since
   only one #back-to-top exists in the corrected index.html */
#back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 999;
}

#back-to-top .btn {
  border-radius: 50% !important;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  background: var(--accent) !important;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.4);
  transition: transform var(--dur-fast) var(--ease-out);
}

#back-to-top .btn:hover {
  transform: translateY(-4px) scale(1.05);
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root {
    --space-section: clamp(48px, 10vw, 80px);
  }
  .pt-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pt-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pt-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dropdown-menu {
    background: transparent !important;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .pt-footer {
    padding-top: 52px;
  }

  .pt-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pt-footer-brand p {
    max-width: 100%;
  }

  .pt-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .pt-footer-certs {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pt-footer-certs img {
    height: 44px;
  }
}

@media (max-width: 1399px) {
  html body #header .navbar-header {
    float: none;
  }

  .pt-service-grid--mosaic .pt-service-card-inner,
  .pt-service-grid--mosaic
    .pt-service-card:nth-child(even)
    .pt-service-card-inner {
    grid-template-columns: 1fr;
  }

  .pt-service-grid--mosaic
    .pt-service-card:nth-child(even)
    .pt-service-card-media {
    order: 0;
  }

  .pt-service-grid--mosaic .pt-service-card-media {
    min-height: 210px;
  }

  html body #header .navbar-toggle {
    display: block !important;
  }

  html body #header .navbar-collapse.collapse {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  html body #header .navbar-collapse.collapse.in {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    position: fixed !important;
    top: var(--header-h-mobile);
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--header-h-mobile));
    overflow-y: auto;
    padding: 20px 24px 40px;
    margin: 0;
    z-index: 998;
    box-shadow: var(--shadow-lg);
    background: rgba(11, 18, 32, 0.95) !important;
  }

  html body #header .navbar-nav {
    float: none !important;
    margin: 0;
    background: rgba(11, 18, 32, 0.95) !important;
    background-color: rgba(11, 18, 32, 0.95) !important;
  }

  html body #header .navbar-nav > li {
    float: none;
  }

  html body #header .navbar-collapse.collapse.in .navbar-nav > li {
    border-bottom: 1px solid var(--navy-line);
  }

  html body #header .navbar-collapse.collapse.in .navbar-nav > li > a,
  html body #header .navbar-collapse .navbar-nav > li > a {
    color: #fff !important;
  }

  html body #header .navbar-collapse.collapse.in .navbar-nav > li > a {
    padding: 16px 4px;
    font-size: 15px;
  }

  html body #header .navbar-collapse .navbar-nav > li.active > a,
  html body #header .navbar-collapse .navbar-nav > li:hover > a {
    color: var(--accent) !important;
  }

  /* Caret next to Services / Products in the mobile drawer.
     Turned into a large, right-aligned tap target that sits on top of its
     row so a tap always hits the toggle (JS) and never slips onto the
     parent link. */
  html body #header .navbar-nav > li.dropdown {
    position: relative;
  }

  html body #header .dropdown > i.v-ser {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 52px;
    margin: 0;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    z-index: 3;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  html body #header .dropdown.open > i.v-ser {
    transform: rotate(180deg);
  }

  /* Leave room for the caret so long labels do not run under it. */
  html body #header .navbar-collapse .navbar-nav > li.dropdown > a {
    padding-right: 56px !important;
  }

  /* Collapsed ("hamburger") nav submenus.
     These are scoped to .navbar-collapse only - NOT .collapse.in - so the
     toggle behaves identically across the whole mobile/tablet range. The
     earlier .collapse.in scoping left a gap in the ~768-1399px band where
     the submenu kept position:absolute and rendered off-screen.
     display:none/block need !important here to beat the global
     ".dropdown-menu { display: block !important }" rule above. */
  html body #header .navbar-collapse .dropdown-menu {
    position: static !important;
    float: none !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none;
    border: none;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: none !important;
    padding-left: 12px;
  }

  html body #header .navbar-collapse .dropdown.open .dropdown-menu {
    display: block !important;
  }

  html body #header .navbar-collapse .dropdown-menu ul li a {
    color: var(--accent) !important;
  }
}

@media (max-width: 375px) {
  .btn.btn-primary.cd-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
  }
}