:root {
      --pt-navy: #071833;
      --pt-blue: #0b3d91;
      --pt-cyan: #23c4d8;
      --pt-gold: #f5b642;
      --pt-ink: #101828;
      --pt-muted: #667085;
      --pt-soft: #f4f7fb;
      --pt-card: #ffffff;
      --banner: none;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Poppins', sans-serif; color: var(--pt-ink); background: #fff; }
    a:hover { text-decoration: none; }

    .header {
      background: rgba(255,255,255,0.92);
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
      backdrop-filter: blur(16px);
    }

    .navbar-brand img { max-width: 260px; height: auto; }
    .navbar-nav .nav-link { font-weight: 700; letter-spacing: .02em; color: #0f172a !important; }
    .navbar-nav .nav-link:hover { color: var(--pt-blue) !important; }

    .pt-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: 999px;
      font-weight: 800;
      transition: all .25s ease;
      border: 1px solid transparent;
      line-height: 1;
    }

    .pt-btn-primary { background: linear-gradient(135deg, var(--pt-cyan), var(--pt-blue)); color: #fff; box-shadow: 0 16px 40px rgba(11, 61, 145, .28); }
    .pt-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 50px rgba(11, 61, 145, .35); }
    .pt-btn-outline { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); }
    .pt-btn-outline:hover { background: #fff; color: var(--pt-blue); transform: translateY(-3px); }
    .pt-btn-dark { background: var(--pt-navy); color: #fff; }
    .pt-btn-dark:hover { background: var(--pt-blue); color: #fff; transform: translateY(-3px); }

    .pt-section { padding: 90px 0; }
    .pt-section-soft { background: var(--pt-soft); }
    .pt-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(35,196,216,.12);
      color: var(--pt-blue);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .pt-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--pt-cyan); box-shadow: 0 0 0 6px rgba(35,196,216,.15); }
    .pt-title { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--pt-navy); letter-spacing: -.03em; }
    .pt-lead { color: var(--pt-muted); font-size: 18px; line-height: 1.8; }

    .w3l-banner {
      margin-top: 86px;
      min-height: 760px;
      display: grid;
      align-items: center;
      position: relative;
      overflow: hidden;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(35,196,216,.22), transparent 32%),
        radial-gradient(circle at 82% 28%, rgba(11,61,145,.55), transparent 28%),
        radial-gradient(circle at 74% 64%, rgba(245,182,66,.16), transparent 22%),
        linear-gradient(115deg, rgba(7,24,51,.98), rgba(7,24,51,.88) 58%, rgba(4,13,30,.98));
      background-size: cover;
      background-position: center;
      transition: background-position .7s ease-in-out, filter .7s ease-in-out;
    }

    .w3l-banner::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 82%);
      pointer-events: none;
    }

    .hero-content { position: relative; z-index: 2; color: #fff; }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      color: #e8fbff;
      font-weight: 700;
      font-size: 14px;
      backdrop-filter: blur(10px);
    }
    .hero-badge span { width: 9px; height: 9px; border-radius: 999px; background: var(--pt-gold); box-shadow: 0 0 0 7px rgba(245,182,66,.16); }
    .hero-title { font-family: 'Playfair Display', serif; font-size: clamp(44px, 7vw, 82px); line-height: .98; font-weight: 700; letter-spacing: -.05em; max-width: 920px; margin: 24px 0; color: #ffffff; text-shadow: 0 3px 24px rgba(0,0,0,.42); }
    .hero-title-highlight {
      display: inline;
      color: #7cf7ff;
      background: linear-gradient(90deg, #ffffff 0%, #7cf7ff 42%, #f8fbff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 3px 16px rgba(0,0,0,.55));
    }
    .hero-title em { color: var(--pt-gold); font-style: italic; text-shadow: 0 3px 18px rgba(0,0,0,.42); }
    .hero-copy { max-width: 740px; color: rgba(255,255,255,.84); font-size: 20px; line-height: 1.8; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

    .hero-panel {
      position: relative;
      z-index: 2;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.1);
      border-radius: 28px;
      padding: 24px;
      box-shadow: 0 28px 80px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
    }
    .hero-panel h4 { color: #fff; font-weight: 800; margin-bottom: 12px; }
    .hero-panel p { color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 0; }
    .hero-panel-grid { display: grid; gap: 14px; margin-top: 20px; }
    .mini-card { display: flex; gap: 14px; align-items: flex-start; padding: 15px; border-radius: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.1); }
    .mini-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(35,196,216,.22); color: #fff; font-weight: 900; }
    .mini-card strong { display: block; color: #fff; font-weight: 800; }
    .mini-card span { color: rgba(255,255,255,.72); font-size: 14px; }

    .stats-strip {
      position: relative;
      z-index: 3;
      margin-top: -64px;
    }
    .stats-box {
      background: #fff;
      border-radius: 30px;
      box-shadow: 0 24px 70px rgba(15,23,42,.14);
      padding: 28px;
      border: 1px solid rgba(15,23,42,.06);
    }
    .stat-item { padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #fff, #f7fbff); height: 100%; }
    .stat-number { font-size: 34px; font-weight: 900; color: var(--pt-blue); line-height: 1; }
    .stat-label { margin-top: 8px; color: var(--pt-muted); font-weight: 600; }

    .service-card, .why-card, .process-card {
      background: var(--pt-card);
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 28px;
      padding: 30px;
      height: 100%;
      box-shadow: 0 16px 44px rgba(15,23,42,.06);
      transition: all .25s ease;
    }
    .service-card:hover, .why-card:hover, .process-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(15,23,42,.13); border-color: rgba(35,196,216,.35); }
    .card-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, rgba(35,196,216,.16), rgba(11,61,145,.1)); color: var(--pt-blue); font-weight: 900; font-size: 24px; margin-bottom: 22px; }
    .service-card h4, .why-card h4, .process-card h4 { color: var(--pt-navy); font-weight: 800; margin-bottom: 12px; }
    .service-card p, .why-card p, .process-card p { color: var(--pt-muted); line-height: 1.75; margin: 0; }

    .feature-image {
      min-height: 480px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 25% 30%, rgba(35,196,216,.45), transparent 18%),
        radial-gradient(circle at 70% 32%, rgba(11,61,145,.28), transparent 22%),
        linear-gradient(145deg, #eaf6ff, #ffffff 56%, #dbeafe);
      background-size: 140% 140%;
      background-position: center;
      box-shadow: 0 26px 80px rgba(15,23,42,.16);
      position: relative;
      overflow: hidden;
    }
    .floating-proof {
      position: absolute;
      right: 24px;
      bottom: 24px;
      max-width: 320px;
      border-radius: 24px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(16px);
      padding: 22px;
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
    }
    .floating-proof strong { color: var(--pt-navy); display: block; margin-bottom: 8px; }
    .floating-proof p { color: var(--pt-muted); margin: 0; line-height: 1.65; }

    .elearn-cta {
      border-radius: 36px;
      background:
        radial-gradient(circle at 15% 20%, rgba(35,196,216,.26), transparent 30%),
        linear-gradient(135deg, var(--pt-navy), #0a2a62 58%, #083b77);
      padding: 58px;
      color: #fff;
      overflow: hidden;
      position: relative;
    }
    .elearn-cta h2 { color: #fff; font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.03em; }
    .elearn-cta p { color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.8; }

    .process-number { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: var(--pt-navy); color: #fff; font-weight: 900; margin-bottom: 22px; }

    .final-cta {
      background: linear-gradient(135deg, #f9fbff, #eef8fb);
      border-radius: 36px;
      padding: 56px;
      border: 1px solid rgba(15,23,42,.07);
    }

    .w3l-footers-14 { background: var(--pt-navy) !important; color: rgba(255,255,255,.78); }
    .footer14-nav li a { color: rgba(255,255,255,.82) !important; font-weight: 700; }
    .footer14-nav li a:hover { color: #fff !important; }
    .copyright p { color: rgba(255,255,255,.68); }

    .reveal { opacity: 0; transform: translateY(26px); transition: all .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 991px) {
      .navbar-brand img { max-width: 210px; }
      .w3l-banner { margin-top: 78px; min-height: auto; padding: 110px 0 90px; }
      .hero-panel { margin-top: 34px; }
      .stats-strip { margin-top: 0; padding-top: 24px; background: var(--pt-soft); }
      .pt-section { padding: 70px 0; }
      .elearn-cta, .final-cta { padding: 34px; }
    }

    @media (max-width: 575px) {
      .navbar-brand img { max-width: 178px; }
      .hero-copy { font-size: 17px; }
      .pt-btn { width: 100%; padding: 15px 20px; }
      .stats-box { padding: 14px; }
      .elearn-cta, .final-cta { border-radius: 26px; padding: 28px; }
      .feature-image { min-height: 360px; }
      .floating-proof { left: 18px; right: 18px; bottom: 18px; }
    }

.footer-logo { max-width: 240px; height: auto; }
.footer-description { max-width: 460px; line-height: 1.8; }
.cta-button-row { gap: 12px; }
.max-760 { max-width: 760px; }


/* Subtle professional animation layer - copyright-safe CSS visuals, no stock photos required */
.w3l-banner::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  right: -140px;
  top: 90px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(35,196,216,.26), rgba(11,61,145,.12) 42%, transparent 64%);
  filter: blur(2px);
  animation: pt-float-large 11s ease-in-out infinite;
  pointer-events: none;
}

.hero-theme-1 { background-position: 50% 50%; }
.hero-theme-2 { background-position: 55% 45%; }
.hero-theme-3 { background-position: 45% 55%; }

.hero-visual {
  position: relative;
  min-height: 310px;
  margin-bottom: 22px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
    radial-gradient(circle at center, rgba(35,196,216,.18), transparent 58%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.hero-visual::before,
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 34px;
  border-radius: 999px;
  border: 1px solid rgba(35,196,216,.34);
  animation: pt-spin-slow 22s linear infinite;
}

.hero-visual::after {
  inset: 72px;
  border-color: rgba(245,182,66,.32);
  animation-direction: reverse;
  animation-duration: 28s;
}

.orb-core {
  position: absolute;
  width: 142px;
  height: 142px;
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 30%, #e8fbff, #23c4d8 22%, #0b3d91 62%, #061a36 100%);
  box-shadow: 0 0 45px rgba(35,196,216,.55), inset -16px -20px 40px rgba(0,0,0,.25);
  animation: pt-float 5.5s ease-in-out infinite;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  transform: translate(-50%, -50%) rotate(-18deg);
}
.orbit-one { width: 250px; height: 100px; animation: pt-orbit 12s linear infinite; }
.orbit-two { width: 285px; height: 118px; animation: pt-orbit 17s linear infinite reverse; }

.visual-node {
  position: absolute;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  animation: pt-float 6.5s ease-in-out infinite;
}
.node-one { left: 24px; top: 46px; }
.node-two { right: 34px; top: 68px; animation-delay: .8s; }
.node-three { right: 74px; bottom: 44px; animation-delay: 1.4s; }

.dynamic-visual {
  animation: pt-soft-pan 12s ease-in-out infinite alternate;
}

.dynamic-visual::before {
  content: '';
  position: absolute;
  width: 68%;
  height: 68%;
  left: 16%;
  top: 16%;
  border-radius: 50%;
  background:
    conic-gradient(from 180deg, rgba(35,196,216,.28), rgba(11,61,145,.24), rgba(245,182,66,.20), rgba(35,196,216,.28));
  filter: blur(.3px);
  animation: pt-spin-slow 26s linear infinite;
}

.visual-grid {
  position: absolute;
  inset: 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 20px;
  z-index: 1;
}

.visual-grid span {
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 20px 60px rgba(15,23,42,.12);
  border: 1px solid rgba(15,23,42,.06);
  animation: pt-card-float 7s ease-in-out infinite;
}
.visual-grid span:nth-child(2) { animation-delay: .6s; }
.visual-grid span:nth-child(3) { animation-delay: 1.2s; }
.visual-grid span:nth-child(4) { animation-delay: 1.8s; }

.service-card,
.why-card,
.process-card,
.stat-item {
  will-change: transform, box-shadow;
}

.service-card:hover .card-icon,
.why-card:hover h4,
.process-card:hover .process-number {
  animation: pt-pulse 1.4s ease-in-out infinite;
}

.elearn-cta::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -140px;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: rgba(35,196,216,.2);
  filter: blur(12px);
  animation: pt-float-large 13s ease-in-out infinite;
}

.elearn-visual {
  position: absolute;
  right: 32px;
  bottom: 20px;
  width: 300px;
  height: 190px;
  opacity: .42;
  pointer-events: none;
}

.screen-card {
  position: absolute;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  animation: pt-card-float 7s ease-in-out infinite;
}
.screen-one { width: 210px; height: 120px; right: 40px; bottom: 34px; }
.screen-two { width: 120px; height: 78px; right: 0; top: 16px; animation-delay: .9s; }
.screen-three { width: 96px; height: 96px; left: 0; bottom: 0; animation-delay: 1.5s; }

.final-cta {
  position: relative;
  overflow: hidden;
}

.final-cta::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  right: -160px;
  bottom: -190px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(35,196,216,.2), transparent 64%);
  animation: pt-float-large 14s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-13px); }
}

@keyframes pt-float-large {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-18px,18px,0) scale(1.04); }
}

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

@keyframes pt-orbit {
  from { transform: translate(-50%, -50%) rotate(-18deg); }
  to { transform: translate(-50%, -50%) rotate(342deg); }
}

@keyframes pt-soft-pan {
  0% { background-position: 35% 40%; }
  100% { background-position: 65% 55%; }
}

@keyframes pt-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pt-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

@media (max-width: 991px) {
  .hero-visual { min-height: 250px; }
  .elearn-visual { opacity: .18; right: -35px; }
}

@media (max-width: 575px) {
  .hero-visual { min-height: 220px; }
  .orb-core { width: 112px; height: 112px; }
  .visual-grid { inset: 32px; gap: 12px; }
  .elearn-visual { display: none; }
}