/* ══════════════════════════════════════════
       DESIGN TOKENS
    ══════════════════════════════════════════ */
  :root {
      --navy: #0b1d35;
      --navy2: #112447;
      --navy3: #1a3260;
      --or: #e06000;
      --or2: #ff7400;
      --or3: #ff9a3c;
      --off: #f5f8fc;
      --b1: #dce6f0;
      --b2: #c4d4e4;
      --s1: 0 2px 12px rgba(11, 29, 53, .07);
      --s2: 0 8px 32px rgba(11, 29, 53, .11);
      --s3: 0 20px 60px rgba(11, 29, 53, .15);
      --s4: 0 32px 80px rgba(11, 29, 53, .2);
      --bg-dark: #04080f;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'DM Sans', sans-serif;
      background: var(--off);
      color: var(--navy);
      overflow-x: hidden;
      line-height: 1.65;
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  img {
      max-width: 100%;
      display: block;
  }

  /* ══════════════════════════════════════════
       FONT HELPERS
    ══════════════════════════════════════════ */
  .ff-barlow {
      font-family: 'Barlow Condensed', sans-serif;
  }

  .ff-oswald {
      font-family: 'Oswald', sans-serif;
  }

  .ff-bebas {
      font-family: 'Bebas Neue', sans-serif;
  }

  .text-grad-or {
      background: linear-gradient(135deg, #e06000, #ff7400, #ff9a3c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .section-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 14px;
  }

  .section-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: linear-gradient(90deg, var(--or), var(--or2));
      border-radius: 1px;
  }

  /* ══════════════════════════════════════════
       KEYFRAMES
    ══════════════════════════════════════════ */
  @keyframes shimmer {
      0% {
          background-position: -400% 0
      }

      100% {
          background-position: 400% 0
      }
  }

  @keyframes shimmerBorder {
      0% {
          background-position: -200% 0
      }

      100% {
          background-position: 200% 0
      }
  }

  @keyframes glowPulse {

      0%,
      100% {
          box-shadow: 0 0 18px rgba(224, 96, 0, .2)
      }

      50% {
          box-shadow: 0 0 40px rgba(224, 96, 0, .4), 0 0 70px rgba(224, 96, 0, .2)
      }
  }

  @keyframes ticker {
      from {
          transform: translateX(0)
      }

      to {
          transform: translateX(-50%)
      }
  }

  @keyframes bgDrift {

      0%,
      100% {
          transform: scale(1.06) translateX(0)
      }

      50% {
          transform: scale(1.06) translateX(12px)
      }
  }

  @keyframes truckRoll {
      0% {
          left: -120px;
          opacity: 0
      }

      8% {
          opacity: 1
      }

      85% {
          opacity: 1
      }

      100% {
          left: 110%;
          opacity: 0
      }
  }

  @keyframes puff {
      0% {
          transform: translateY(0) scale(1);
          opacity: .3
      }

      100% {
          transform: translateY(-28px) scale(2.5);
          opacity: 0
      }
  }

  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(22px)
      }

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

  @keyframes pdotPulse {

      0%,
      100% {
          transform: scale(1);
          opacity: .7
      }

      50% {
          transform: scale(2.2);
          opacity: 0
      }
  }

  @keyframes bordFlow {
      0% {
          background-position: 0% 50%
      }

      100% {
          background-position: 200% 50%
      }
  }

  @keyframes iconPulse {

      0%,
      100% {
          opacity: 0;
          transform: scale(1)
      }

      50% {
          opacity: 1;
          transform: scale(1.12)
      }
  }

  @keyframes floatMap {

      0%,
      100% {
          transform: translateY(0) rotate(-1deg)
      }

      50% {
          transform: translateY(-14px) rotate(1deg)
      }
  }

  @keyframes gradFlow {
      0% {
          background-position: 0% 50%
      }

      50% {
          background-position: 100% 50%
      }

      100% {
          background-position: 0% 50%
      }
  }

  @keyframes progressBar {
      from {
          width: 0%
      }

      to {
          width: 100%
      }
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }

  @keyframes fadeSlideIn {
      from {
          opacity: 0;
          transform: translateX(80px)
      }

      to {
          opacity: 1;
          transform: translateX(0)
      }
  }

  @keyframes fadeSlideOut {
      from {
          opacity: 1;
          transform: translateX(0)
      }

      to {
          opacity: 0;
          transform: translateX(-80px)
      }
  }

  @keyframes scdown {
      0% {
          transform: translateY(0);
          opacity: 1
      }

      60% {
          transform: translateY(12px);
          opacity: 0
      }

      61% {
          transform: translateY(0);
          opacity: 0
      }

      100% {
          opacity: 1
      }
  }

  @keyframes nxPulse {

      0%,
      100% {
          opacity: 1;
          transform: scale(1)
      }

      50% {
          opacity: .35;
          transform: scale(.65)
      }
  }

  /* ══════════════════════════════════════════
       SCROLL REVEAL
    ══════════════════════════════════════════ */
  .rv {
      opacity: 0;
      transform: translateY(38px);
      transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
  }

  .rv-l {
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
  }

  .rv-r {
      opacity: 0;
      transform: translateX(50px);
      transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
  }

  .rv.on,
  .rv-l.on,
  .rv-r.on {
      opacity: 1;
      transform: none;
  }

  .d1 {
      transition-delay: .07s
  }

  .d2 {
      transition-delay: .14s
  }

  .d3 {
      transition-delay: .21s
  }

  .d4 {
      transition-delay: .28s
  }

  .d5 {
      transition-delay: .35s
  }

  .d6 {
      transition-delay: .42s
  }

  /* ══════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════ */
  #mainNav {
      background: #ffffff;
      backdrop-filter: blur(24px);
      border-bottom: 2px solid var(--b1);
      transition: box-shadow .3s;
      position: sticky;
      top: 0;
      z-index: 300;
  }

  .nav-logo {
      height: 78px;
      width: auto;
  }

  .nav-link-item {
      position: relative;
      font-family: 'DM Sans', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: #607080;
      padding: 10px 13px;
      display: flex;
      align-items: center;
      transition: color .2s;
      white-space: nowrap;
  }

  .nav-link-item:hover,
  .nav-link-item.active {
      color: var(--navy);
  }

  .nav-link-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 13px;
      right: 13px;
      height: 3px;
      background: linear-gradient(90deg, var(--or), var(--or2));
      transform: scaleX(0);
      transition: transform .3s;
      border-radius: 2px 2px 0 0;
  }

  .nav-link-item:hover::after,
  .nav-link-item.active::after {
      transform: scaleX(1);
  }

  .dropdown-menu-custom {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 240px;
      background: white;
      border: 1px solid var(--b1);
      border-top: 3px solid var(--or);
      box-shadow: 0 20px 60px rgba(11, 29, 53, .15);
      border-radius: 0 0 10px 10px;
      padding: 8px 0;
      z-index: 999;
      animation: fadeUp .22s ease;
  }

  .nav-has-dropdown:hover .dropdown-menu-custom {
      display: block;
  }

  .dropdown-menu-custom a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 22px;
      font-size: 12.5px;
      color: #2c3e5a;
      transition: all .2s;
  }

  .dropdown-menu-custom a:hover {
      color: var(--or);
      background: #fff5eb;
      padding-left: 28px;
  }

  .btn-quote {
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f97316 0%, #dc5900 100%);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    box-shadow: 0 4px 22px rgba(249, 115, 22, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .15s, box-shadow .15s;

  }

  .btn-quote:hover {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 8px 30px rgba(224, 96, 0, .4);
  }

  #mobileMenu {
      display: none;
      position: fixed;
      top: 82px;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      z-index: 299;
      overflow-y: auto;
  }

  /* ══════════════════════════════════════════
       HERO
    ══════════════════════════════════════════ */
  #hero {
      position: relative;
      min-height: 75vh;
      background: var(--bg-dark);
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .hbg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: url('../img/nexus-hualage-hero-image.jpeg');
      background-size: cover;
      background-position: center;
      filter: brightness(.38) saturate(.65);
      animation: bgDrift 28s ease-in-out infinite;
      transform: scale(1.05);
  }

  .hov1 {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(ellipse 80% 80% at 25% 45%, rgba(4, 8, 15, .05) 0%, rgba(4, 8, 15, .6) 65%, rgba(4, 8, 15, .88) 100%);
  }

  .hov2 {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(135deg, rgba(224, 80, 0, .06) 0%, transparent 50%, rgba(0, 20, 60, .18) 100%);
  }

  .hov3 {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(0deg, rgba(4, 8, 15, .92) 0%, rgba(4, 8, 15, .4) 30%, transparent 60%);
  }

  .hgrid {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .03;
      background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
      background-size: 80px 80px;
  }

  .diag {
      position: absolute;
      top: -10%;
      left: 55%;
      width: 1px;
      height: 140%;
      background: linear-gradient(180deg, transparent, rgba(255, 148, 50, .12), rgba(255, 148, 50, .25), rgba(255, 148, 50, .12), transparent);
      transform: rotate(12deg);
      z-index: 2;
  }

  .diag2 {
      position: absolute;
      top: -10%;
      left: 62%;
      width: 1px;
      height: 140%;
      background: linear-gradient(180deg, transparent, rgba(255, 148, 50, .06), rgba(255, 148, 50, .1), transparent);
      transform: rotate(12deg);
      z-index: 2;
  }

  canvas#ptc {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
  }

  .noise {
      position: absolute;
      inset: 0;
      z-index: 3;
      opacity: .025;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 160px 160px;
  }

  .bfade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 180px;
      z-index: 4;
      background: linear-gradient(0deg, var(--bg-dark) 0%, transparent 100%);
  }

  .truck {
      position: absolute;
      bottom: 28px;
      z-index: 5;
      pointer-events: none;
      left: -120px;
      animation: truckRoll 12s ease-in-out 1.5s infinite;
      filter: drop-shadow(0 0 20px rgba(255, 148, 50, .4));
      font-size: 44px;
  }

  .smoke {
      position: absolute;
      top: -14px;
      left: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .18);
  }

  .smoke:nth-child(1) {
      animation: puff .9s ease-out infinite
  }

  .smoke:nth-child(2) {
      animation: puff 1.1s ease-out .25s infinite
  }

  .smoke:nth-child(3) {
      animation: puff 1.4s ease-out .5s infinite
  }

  .hbody {
      position: relative;
      z-index: 6;
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 6% 80px;
  }

  @media(max-width:767px) {
      .hbody {
          padding-bottom: 100px;
      }
  }

  .hinner {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
  }

  .pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid rgba(224, 96, 0, .35);
      background: rgba(224, 96, 0, .09);
      backdrop-filter: blur(8px);
      animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) .1s both;
  }

  .pdot {
      position: relative;
      display: inline-flex;
      width: 8px;
      height: 8px;
  }

  .pdot::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #ff8c00;
      opacity: .7;
      animation: pdotPulse 1.8s ease-in-out infinite;
  }

  .pdot::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      background: #ff8c00;
  }

  .htitle {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      line-height: .88;
      font-size: clamp(52px, 8vw, 84px);
      color: #fff;
      letter-spacing: -1px;
      animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) .3s both;
  }

  .htitle .grad {
      background: linear-gradient(90deg, #e06000, #ff9432, #ffcc44, #ff9432, #e06000);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s linear infinite;
  }

  .htitle .outline {
      -webkit-text-stroke: 2px rgba(255, 255, 255, .35);
      color: transparent;
  }

  @media(max-width:767px) {
      .htitle {
          font-size: clamp(46px, 11vw, 70px);
      }
  }

  .rotbox {
      display: flex;
      align-items: center;
      gap: 14px;
      height: 34px;
      animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) .7s both;
  }

  .rline {
      height: 2px;
      width: 40px;
      background: linear-gradient(90deg, var(--or), transparent);
      flex-shrink: 0;
  }

  .rotator {
      position: relative;
      overflow: hidden;
      height: 34px;
      flex: 1;
      max-width: 380px;
  }

  .witem {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .6);
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
  }

  .witem.on {
      opacity: 1;
      transform: translateY(0);
  }

  .hdesc {
      color: rgba(200, 220, 255, .7);
      font-size: clamp(13px, 1.2vw, 15px);
      line-height: 1.85;
      max-width: 480px;
      animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) .9s both;
  }

  .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      max-width: 480px;
      animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) 1.1s both;
  }

  @media(max-width:767px) {
      .hero-stats {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  .scard {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      padding: 14px 10px;
      background: rgba(255, 255, 255, .055);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 28px rgba(0, 0, 0, .3);
      transition: transform .3s, box-shadow .3s;
      cursor: default;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }

  .scard:hover {
      transform: translateY(-5px) scale(1.05);
  }

  .scard .sheen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 45%;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, transparent 100%);
      pointer-events: none;
  }

  .sn {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(18px, 3vw, 30px);
      line-height: 1;
      background: linear-gradient(135deg, #ff9432, #ffcc44);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .sl {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      margin-top: 3px;
  }

  .sico {
      font-size: 14px;
      opacity: .6;
      margin-bottom: 6px;
  }

  .qcard {
      background: linear-gradient(145deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%);
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 22px;
      padding: 30px 28px 26px;
      backdrop-filter: blur(24px);
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 410px;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
      animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) .5s both;
  }

  .qcard::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 148, 50, .7), transparent);
  }

  .ql {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(200, 220, 255, .5);
      margin-bottom: 5px;
      display: block;
  }

  .qi {
      width: 100%;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 10px;
      padding: 10px 13px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      color: rgba(255, 255, 255, .9);
      outline: none;
      transition: border-color .2s, background .2s;
  }

  .qi::placeholder {
      color: rgba(200, 220, 255, .28);
  }

  .qi:focus {
      border-color: rgba(255, 148, 50, .6);
      background: rgba(255, 148, 50, .06);
  }

  select.qi {
      appearance: none;
      cursor: pointer;
  }

  select.qi option {
      background: #1a2035;
      color: #fff;
  }

  .qdiv {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
      margin: 14px 0;
  }

  .qbtn {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 13px;
      cursor: pointer;
      background: linear-gradient(135deg, #ff9432 0%, #e06000 100%);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 15px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #fff;
      box-shadow: 0 6px 24px rgba(255, 100, 0, .4);
      transition: transform .15s, box-shadow .15s;
      overflow: hidden;
      position: relative;
  }

  .qbtn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(255, 100, 0, .55);
  }

  .lbadge {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(74, 222, 128, .08);
      border: 1px solid rgba(74, 222, 128, .22);
  }

  .ldot {
      position: relative;
      display: inline-flex;
      width: 7px;
      height: 7px;
  }

  .ldot::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #4ade80;
      opacity: .6;
      animation: pdotPulse 2s ease-in-out infinite;
  }

  .ldot::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      background: #4ade80;
  }

  .scroll-hint {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 7;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      animation: fadeUp 1s cubic-bezier(.16, 1, .3, 1) 2s both;
  }

  .scm {
      font-size: 9px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .25);
  }

  .sca {
      width: 22px;
      height: 34px;
      border-radius: 11px;
      border: 1px solid rgba(255, 255, 255, .2);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 6px;
  }

  .scb {
      width: 3px;
      height: 7px;
      border-radius: 2px;
      background: var(--or);
      animation: scdown 1.8s ease-in-out infinite;
  }

  .hero-layout {
      display: grid;
      grid-template-columns: 1fr 520px;
      gap: 40px;
      align-items: center;
      padding-top: 35px;
  }

  @media(max-width:1199px) {
      .hero-layout {
          grid-template-columns: 1fr;
      }

      .qcard {
          display: none;
      }
  }

  /* ══════════════════════════════════════════
       TICKER
    ══════════════════════════════════════════ */
  #ticker {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      background: linear-gradient(90deg, #0b1d35, #112447, #1a3260);
      background-size: 200%;
      animation: gradFlow 8s ease infinite;
      padding: 10px 0;
      box-shadow: 0 6px 30px rgba(11, 29, 53, .22);
      z-index: 10;
  }

  .ticker-inner {
      display: inline-flex;
      animation: ticker 36s linear infinite;
  }

  .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--or2);
      padding: 0 20px;
  }

  @media(min-width:768px) {
      .ticker-item {
          font-size: 14px;
          padding: 0 26px;
          gap: 18px;
      }
  }

  .ticker-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, #e06000, #ff7400);
  }

  /* ══════════════════════════════════════════
       COMPANY BAND
    ══════════════════════════════════════════ */
  #company-band {
      background: white;
      border-bottom: 1px solid var(--b1);
      box-shadow: var(--s1);
  }

  .band-item {
      position: relative;
      overflow: hidden;
      padding: 20px 12px;
      text-align: center;
      border-right: 1px solid var(--b1);
      cursor: default;
      transition: background .3s;
  }

  .band-item:last-child {
      border-right: 0;
  }

  @media(max-width:767px) {

      .band-item:nth-child(2),
      .band-item:nth-child(4) {
          border-right: 0;
      }

      .band-item:nth-child(1),
      .band-item:nth-child(2) {
          border-bottom: 1px solid var(--b1);
      }
  }

  .band-item:hover {
      background: #fff5eb;
  }

  .band-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--or), var(--or2));
      transform: scaleX(0);
      transition: transform .3s;
      transform-origin: center;
  }

  .band-item:hover::after {
      transform: scaleX(1);
  }

  .band-icon {
      font-size: 24px;
      margin-bottom: 8px;
      display: block;
  }

  @media(min-width:768px) {
      .band-icon {
          font-size: 28px;
          margin-bottom: 10px;
      }
  }

  .band-val {
      font-family: 'Oswald', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--navy);
      display: block;
      margin-bottom: 2px;
  }

  @media(min-width:768px) {
      .band-val {
          font-size: 17px;
      }
  }

  .band-lbl {
      font-size: 8px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #607080;
      display: block;
  }

  @media(min-width:768px) {
      .band-lbl {
          font-size: 10px;
      }
  }

  /* ══════════════════════════════════════════
       SERVICES
    ══════════════════════════════════════════ */
  #services {
      position: relative;
      overflow: hidden;
      background: var(--off);
      padding: 64px 16px;
  }

  @media(min-width:576px) {
      #services {
          padding: 100px 5%;
      }
  }

  .services-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-bottom: 40px;
      flex-wrap: wrap;
  }

  @media(min-width:576px) {
      .services-header {
          margin-bottom: 56px;
          gap: 40px;
      }
  }

  .services-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(38px, 5.5vw, 78px);
      line-height: .9;
      color: var(--navy);
  }

  .services-desc {
      font-size: 14px;
      color: #607080;
      line-height: 1.78;
      max-width: 560px;
  }

  @media(min-width:576px) {
      .services-desc {
          font-size: 15.5px;
      }
  }

  .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
  }

  @media(min-width:576px) {
      .services-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 18px;
      }
  }

  @media(min-width:1280px) {
      .services-grid {
          grid-template-columns: repeat(4, 1fr);
      }
  }

  .svc-card {
      position: relative;
      background: white;
      padding: 20px 16px;
      border: 1.5px solid var(--b1);
      border-radius: 14px;
      box-shadow: var(--s1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: default;
      transition: border-color .3s, transform .3s, box-shadow .3s, background .2s;
  }

  @media(min-width:576px) {
      .svc-card {
          padding: 26px;
          gap: 16px;
      }
  }

  .svc-card:hover {
      border-color: rgba(224, 96, 0, .3);
      transform: translateY(-6px);
      box-shadow: var(--s3);
  }

  .svc-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--or), var(--or2));
      border-radius: 14px 14px 0 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
  }

  .svc-card:hover::before {
      transform: scaleX(1);
  }

  .svc-num-bg {
      position: absolute;
      bottom: -8px;
      right: 6px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 80px;
      line-height: 1;
      color: rgba(11, 29, 53, .04);
      pointer-events: none;
      user-select: none;
  }

  .svc-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #fff5eb, #fff0df);
      border: 1px solid rgba(224, 96, 0, .22);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: transform .3s, box-shadow .3s;
  }

  @media(min-width:576px) {
      .svc-icon {
          width: 58px;
          height: 58px;
          font-size: 25px;
      }
  }

  .svc-card:hover .svc-icon {
      transform: scale(1.12) rotate(-6deg);
      box-shadow: 0 4px 20px rgba(224, 96, 0, .2);
  }

  .svc-title {
      font-family: 'Oswald', sans-serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--navy);
      margin: 0;
  }

  @media(min-width:576px) {
      .svc-title {
          font-size: 19px;
      }
  }

  .svc-desc {
      font-size: 12.5px;
      color: #607080;
      line-height: 1.74;
      margin: 0;
  }

  @media(min-width:576px) {
      .svc-desc {
          font-size: 13.5px;
      }
  }

  /* ══════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════ */
  #about {
      position: relative;
      overflow: hidden;
      background: white;
      padding: 64px 16px;
  }

  @media(min-width:576px) {
      #about {
          padding: 100px 5%;
      }
  }

  .about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
  }

  @media(min-width:992px) {
      .about-grid {
          grid-template-columns: 1fr 1fr;
          gap: 80px;
      }
  }

  .about-photos {
      position: relative;
  }

  .about-main-img {
      width: 100%;
      aspect-ratio: 5/4;
      object-fit: cover;
      border-radius: 16px;
      box-shadow: var(--s4);
      transition: transform .5s;
      display: block;
  }

  .about-photos:hover .about-main-img {
      transform: scale(1.02);
  }

  .about-secondary-img {
      display: none;
      position: absolute;
      bottom: -26px;
      right: -26px;
      width: 52%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 12px;
      border: 5px solid white;
      box-shadow: var(--s3);
      transition: transform .5s;
  }

  @media(min-width:992px) {
      .about-secondary-img {
          display: block;
      }
  }

  .about-tag {
      position: absolute;
      top: 16px;
      left: 16px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: white;
      font-family: 'Oswald', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 8px 12px;
      border-radius: 4px;
      box-shadow: 0 4px 20px rgba(224, 96, 0, .4);
  }

  .about-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(38px, 5.5vw, 78px);
      line-height: .9;
      color: var(--navy);
      margin-bottom: 16px;
  }

  .about-desc {
      font-size: 14px;
      color: #607080;
      line-height: 1.78;
      max-width: 560px;
  }

  @media(min-width:576px) {
      .about-desc {
          font-size: 15.5px;
      }
  }

  .checklist {
      list-style: none;
      padding: 0;
      margin: 20px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  @media(min-width:576px) {
      .checklist {
          margin-top: 28px;
          gap: 12px;
      }
  }

  .check-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      background: var(--off);
      border: 1.5px solid var(--b1);
      border-radius: 10px;
      cursor: default;
      transition: border-color .3s, transform .3s, background .3s, box-shadow .3s;
  }

  @media(min-width:576px) {
      .check-item {
          gap: 14px;
          padding: 15px 18px;
      }
  }

  .check-item:hover {
      border-color: rgba(224, 96, 0, .35);
      transform: translateX(6px);
      background: #fff5eb;
      box-shadow: 0 4px 16px rgba(224, 96, 0, .2);
  }

  .check-icon-wrap {
      width: 24px;
      height: 24px;
      min-width: 24px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(224, 96, 0, .2);
      flex-shrink: 0;
  }

  .check-icon-wrap svg {
      width: 13px;
      height: 13px;
  }

  .check-text-title {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
  }

  .check-text-desc {
      font-size: 12px;
      color: #607080;
      line-height: 1.55;
  }

  /* ══════════════════════════════════════════
       TRUST SECTION (orange band)
    ══════════════════════════════════════════ */
  .trust-section {
      background: linear-gradient(135deg, #d45a00 0%, #f57000 45%, #ff9a00 100%);
      position: relative;
      overflow: hidden;
      padding: 68px 0 56px;
  }

  .trust-section::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .13) 1.5px, transparent 1.5px);
      background-size: 36px 36px;
      z-index: 0;
  }

  .trust-glow-bl {
      position: absolute;
      bottom: -70px;
      left: -70px;
      width: 280px;
      height: 280px;
      background: rgba(255, 255, 255, .07);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
  }

  .trust-inner {
      position: relative;
      z-index: 1;
  }

  .trust-divider {
      width: 72px;
      height: 2px;
      background: rgba(255, 255, 255, .35);
      border-radius: 2px;
      margin: 0 auto 40px;
  }

  .trust-flag-box {
      width: 62px;
      height: 62px;
      border: 2px solid rgba(255, 255, 255, .4);
      border-radius: 10px;
      background: rgba(0, 0, 0, .18);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 28px;
      line-height: 1;
  }

  .trust-reg-title {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(14px, 2vw, 17px);
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      line-height: 1.2;
  }

  .trust-reg-sub {
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
      margin-top: 5px;
      letter-spacing: .4px;
  }

  .trust-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      border-radius: 10px;
      padding: 14px 22px;
      text-decoration: none;
      color: #fff !important;
      min-width: 210px;
      transition: background .2s, border-color .2s, transform .15s;
  }

  .trust-btn:hover {
      transform: translateY(-2px);
  }

  .trust-btn-solid {
      background: rgba(0, 0, 0, .25);
      border: 1.5px solid rgba(255, 255, 255, .35);
  }

  .trust-btn-solid:hover {
      background: rgba(0, 0, 0, .42);
  }

  .trust-btn-ghost {
      background: rgba(0, 0, 0, .25);
      border: 1.5px solid rgba(255, 255, 255, .35);
  }

  .trust-btn-ghost:hover {
      background: rgba(0, 0, 0, .42);
  }

  .trust-icon-wrap {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
  }

  .trust-btn-label {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(14px, 1.8vw, 16px);
      letter-spacing: 1px;
      line-height: 1.2;
  }

  .trust-btn-sub {
      font-size: 9px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .65);
      margin-top: 3px;
  }

  .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(0, 0, 0, .18);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 30px;
      padding: 6px 16px;
  }

  .trust-badge-txt {
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
      color: rgba(255, 255, 255, .85);
      letter-spacing: 1px;
      text-transform: uppercase;
  }

  /* ══════════════════════════════════════════
       PORT COVERAGE
    ══════════════════════════════════════════ */
  #coverage {
      position: relative;
      overflow: hidden;
      background: var(--off);
      padding: 64px 16px;
  }

  @media(min-width:576px) {
      #coverage {
          padding: 100px 5%;
      }
  }

  .coverage-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
  }

  @media(min-width:992px) {
      .coverage-grid {
          grid-template-columns: 1fr 1fr;
          gap: 80px;
      }
  }

  .port-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 24px;
  }

  @media(min-width:576px) {
      .port-list {
          gap: 10px;
          margin-top: 32px;
      }
  }

  .port-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: white;
      border: 1.5px solid var(--b1);
      border-radius: 10px;
      box-shadow: var(--s1);
      cursor: default;
      transition: all .2s;
  }

  @media(min-width:576px) {
      .port-item {
          gap: 12px;
          padding: 14px 18px;
      }
  }

  .port-item:hover {
      background: #fff5eb;
      border-color: rgba(224, 96, 0, .3);
      transform: translateX(5px);
      box-shadow: 0 4px 16px rgba(224, 96, 0, .2);
  }

  .port-dot {
      width: 7px;
      height: 7px;
      min-width: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--or), var(--or2));
  }

  .port-name {
      font-family: 'Oswald', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--navy);
      line-height: 1.2;
  }

  @media(min-width:576px) {
      .port-name {
          font-size: 13px;
          letter-spacing: 1px;
      }
  }

  .port-tag {
      margin-left: auto;
      font-size: 8px;
      color: var(--or);
      font-weight: 700;
      flex-shrink: 0;
  }

  @media(min-width:576px) {
      .port-tag {
          font-size: 10px;
      }
  }

  .map-svg-wrap {
      display: flex;
      justify-content: center;
  }

  .map-svg-wrap svg {
      width: 100%;
      max-width: 320px;
      filter: drop-shadow(0 8px 32px rgba(11, 29, 53, .12));
      animation: floatMap 7s ease-in-out infinite;
  }

  @media(min-width:576px) {
      .map-svg-wrap svg {
          max-width: 400px;
      }
  }

  @media(min-width:992px) {
      .map-svg-wrap svg {
          max-width: 460px;
      }
  }

  /* ══════════════════════════════════════════
       PROCESS
    ══════════════════════════════════════════ */
  #process {
      position: relative;
      overflow: hidden;
      background: white;
      padding: 64px 16px;
  }

  @media(min-width:576px) {
      #process {
          padding: 100px 5%;
      }
  }

  #process::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 50% 50%, #e3ecf9 0%, transparent 70%);
  }

  .process-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-top: 40px;
      position: relative;
      z-index: 1;
  }

  @media(min-width:576px) {
      .process-grid {
          gap: 32px;
          margin-top: 60px;
      }
  }

  @media(min-width:1280px) {
      .process-grid {
          grid-template-columns: repeat(4, 1fr);
      }
  }

  .proc-step {
      text-align: center;
      position: relative;
      z-index: 1;
      padding: 0 8px;
  }

  .proc-icon {
      width: 58px;
      height: 58px;
      background: white;
      border: 2.5px solid var(--b2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin: 0 auto 16px;
      box-shadow: var(--s1);
      transition: all .3s;
  }

  @media(min-width:576px) {
      .proc-icon {
          width: 72px;
          height: 72px;
          font-size: 28px;
          margin-bottom: 22px;
      }
  }

  .proc-step:hover .proc-icon {
      background: linear-gradient(135deg, var(--or), var(--or2));
      border-color: transparent;
      transform: scale(1.16) rotate(12deg);
      box-shadow: 0 6px 24px rgba(224, 96, 0, .4);
  }

  .proc-title {
      font-family: 'Oswald', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 6px;
  }

  @media(min-width:576px) {
      .proc-title {
          font-size: 15px;
      }
  }

  .proc-desc {
      font-size: 11.5px;
      color: #607080;
      line-height: 1.65;
  }

  /* ══════════════════════════════════════════
       TESTIMONIALS
    ══════════════════════════════════════════ */
  #testimonials {
      position: relative;
      overflow: hidden;
      background: var(--off);
      padding: 64px 16px;
  }

  @media(min-width:576px) {
      #testimonials {
          padding: 100px 5%;
      }
  }

  #testimonials::before {
      content: '"';
      font-family: 'Bebas Neue', sans-serif;
      font-size: 400px;
      color: var(--or);
      opacity: .05;
      position: absolute;
      top: -50px;
      left: 1%;
      line-height: 1;
      pointer-events: none;
      z-index: 0;
  }

  .testimonials-accent {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, #e06000, #ff9432, transparent);
      z-index: 1;
  }

  .testimonials-header {
      text-align: center;
      position: relative;
      z-index: 1;
      margin-bottom: 40px;
  }

  @media(min-width:576px) {
      .testimonials-header {
          margin-bottom: 56px;
      }
  }

  .testi-progress-track {
      height: 2px;
      background: var(--b1);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 24px;
  }

  .testi-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #e06000, #ff9432);
      border-radius: 999px;
      width: 0%;
  }

  .testi-progress-fill.running {
      animation: progressBar 5s linear forwards;
  }

  .testi-slider-wrap {
      overflow: hidden;
      position: relative;
      z-index: 1;
  }

  .testi-slide {
      display: grid;
      gap: 16px;
      animation: fadeSlideIn .42s cubic-bezier(.16, 1, .3, 1) both;
  }

  .testi-slide.cols-1 {
      grid-template-columns: 1fr;
  }

  .testi-slide.cols-2 {
      grid-template-columns: repeat(2, 1fr);
  }

  .testi-slide.cols-3 {
      grid-template-columns: repeat(3, 1fr);
  }

  .testi-card {
      background: white;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border-radius: 16px;
      border: 1.5px solid var(--b1);
      border-top: 4px solid transparent;
      box-shadow: 0 4px 20px rgba(11, 29, 53, .07);
      cursor: default;
      height: 100%;
      transition: border-top-color .3s, transform .3s, box-shadow .3s;
  }

  @media(min-width:576px) {
      .testi-card {
          padding: 28px 24px;
      }
  }

  .testi-card:hover {
      border-top-color: var(--or);
      transform: translateY(-4px);
  }

  .testi-card.highlight {
      border-color: var(--or);
      border-top-color: var(--or);
  }

  .testi-stars {
      display: flex;
      gap: 2px;
      margin-bottom: 12px;
  }

  .testi-star {
      font-size: 14px;
      color: #f59e0b;
  }

  .testi-quote {
      font-size: 12.5px;
      color: #2c3e5a;
      line-height: 1.76;
      font-style: italic;
      font-weight: 300;
      flex: 1;
      margin-bottom: 20px;
  }

  .testi-avatar {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--or), var(--or2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 13px;
      color: white;
      box-shadow: 0 3px 12px rgba(224, 96, 0, .3);
      position: relative;
      flex-shrink: 0;
  }

  .testi-check {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #22c55e;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6px;
      color: white;
      font-weight: 700;
  }

  .testi-name {
      font-weight: 700;
      font-size: 12.5px;
      color: var(--navy);
  }

  .testi-role {
      font-size: 10.5px;
      color: #607080;
  }

  .testi-verified {
      margin-left: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(34, 197, 94, .08);
      border: 1px solid rgba(34, 197, 94, .25);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #16a34a;
  }

  .testi-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
  }

  .testi-dots {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .testi-dot {
      height: 7px;
      border-radius: 999px;
      border: 0;
      padding: 0;
      cursor: pointer;
      background: rgba(11, 29, 53, .15);
      transition: all .3s;
      flex-shrink: 0;
  }

  .testi-dot.active {
      width: 24px;
      background: linear-gradient(90deg, #e06000, #ff9432);
  }

  .testi-dot:not(.active) {
      width: 7px;
  }

  .testi-counter {
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
      letter-spacing: 2px;
      color: #90a8c0;
  }

  .testi-counter strong {
      color: var(--navy);
  }

  .testi-arrows {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .testi-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--b1);
      background: white;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      color: #607080;
  }

  .testi-btn:hover {
      border-color: var(--or);
      background: #fff5eb;
      color: var(--or);
  }

  .testi-btn.primary {
      background: linear-gradient(135deg, var(--or), var(--or2));
      border: 0;
      color: white;
  }

  .testi-btn.primary:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(224, 96, 0, .4);
  }

  /* ══════════════════════════════════════════
       CAREERS
    ══════════════════════════════════════════ */
  #careers {
      padding: 0;
  }

  .careers-inner {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--navy), var(--navy2), var(--navy3));
      padding: 40px 16px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
  }

  @media(min-width:576px) {
      .careers-inner {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding: 72px 5%;
          gap: 40px;
      }
  }

  .careers-inner::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 60% 100% at 70% 50%, rgba(224, 96, 0, .12) 0%, transparent 70%);
  }

  .careers-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(30px, 4vw, 56px);
      color: white;
      margin-bottom: 8px;
      line-height: 1;
  }

  .careers-desc {
      color: rgba(255, 255, 255, .7);
      font-size: 13.5px;
      max-width: 540px;
  }

  .careers-btns {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 100%;
  }

  @media(min-width:576px) {
      .careers-btns {
          width: auto;
          flex-shrink: 0;
          gap: 14px;
      }
  }

  .btn-careers-primary {
      flex: 1;
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: white;
      border: 0;
      border-radius: 4px;
      padding: 12px 24px;
      text-align: center;
      box-shadow: 0 6px 28px rgba(224, 96, 0, .4);
      transition: transform .2s;
      cursor: pointer;
  }

  @media(min-width:576px) {
      .btn-careers-primary {
          flex: none;
          font-size: 14px;
          padding: 15px 36px;
      }
  }

  .btn-careers-primary:hover {
      transform: translateY(-2px);
  }

  .btn-careers-ghost {
      flex: 1;
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: white;
      color: var(--navy);
      border: 0;
      border-radius: 4px;
      padding: 12px 24px;
      text-align: center;
      box-shadow: var(--s1);
      transition: transform .2s;
      cursor: pointer;
  }

  @media(min-width:576px) {
      .btn-careers-ghost {
          flex: none;
          padding: 15px 36px;
      }
  }

  .btn-careers-ghost:hover {
      transform: translateY(-2px);
  }

  /* ══════════════════════════════════════════
       CONTACT
    ══════════════════════════════════════════ */
  #contact {
      position: relative;
      overflow: hidden;
      background: white;
      padding: 64px 16px;
  }

  @media(min-width:576px) {
      #contact {
          padding: 100px 5%;
      }
  }

  .contact-bg-panel {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 45%;
      background: var(--off);
      clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  }

  @media(min-width:1280px) {
      .contact-bg-panel {
          display: block;
      }
  }

  .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      position: relative;
      z-index: 1;
  }

  @media(min-width:1280px) {
      .contact-grid {
          grid-template-columns: 1fr 1.35fr;
          gap: 80px;
      }
  }

  .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      background: var(--off);
      border: 1.5px solid var(--b1);
      border-radius: 10px;
      cursor: default;
      transition: all .2s;
      margin-bottom: 10px;
  }

  @media(min-width:576px) {
      .contact-item {
          gap: 16px;
          padding: 15px 17px;
      }
  }

  .contact-item:hover {
      border-color: rgba(224, 96, 0, .3);
      background: #fff5eb;
      transform: translateX(5px);
      box-shadow: 0 4px 16px rgba(224, 96, 0, .2);
  }

  .contact-icon {
      width: 42px;
      height: 42px;
      min-width: 42px;
      border-radius: 10px;
      background: linear-gradient(135deg, #fff5eb, #fff0df);
      border: 1px solid rgba(224, 96, 0, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      transition: box-shadow .2s;
  }

  @media(min-width:576px) {
      .contact-icon {
          width: 50px;
          height: 50px;
          min-width: 50px;
          font-size: 20px;
      }
  }

  .contact-lbl {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #90a8c0;
      margin-bottom: 2px;
  }

  .contact-val {
      font-size: 13px;
      color: var(--navy);
      word-break: break-word;
  }

  @media(min-width:576px) {
      .contact-val {
          font-size: 14.5px;
      }
  }

  .contact-val a {
      color: var(--navy);
      transition: color .2s;
  }

  .contact-val a:hover {
      color: var(--or);
  }

  .form-card {
      position: relative;
      background: white;
      border: 1.5px solid var(--b1);
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(11, 29, 53, .12);
  }

  .form-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--or), var(--or2), var(--or3), var(--or));
      background-size: 50% 100%;
      animation: shimmer 3.5s linear infinite;
      border-radius: 16px 16px 0 0;
      z-index: 1;
  }

  /* ══════════════════════════════════════════
       FOOTER — NEXUS STYLE
    ══════════════════════════════════════════ */
  .nx-footer {
      background: #0b1f3a;
      position: relative;
      overflow: hidden;
      font-family: 'DM Sans', system-ui, sans-serif;
  }

  .nx-footer-bar {
      height: 4px;
      background: linear-gradient(90deg, #ff7a1a 0%, #ff9a3c 55%, #ffb86c 100%);
  }

  .nx-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .035;
      background-image: repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(255, 255, 255, .9) 44px, rgba(255, 255, 255, .9) 45px), repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(255, 255, 255, .9) 44px, rgba(255, 255, 255, .9) 45px);
  }

  .nx-footer-watermark {
      position: absolute;
      right: -40px;
      bottom: -60px;
      font-size: 360px;
      font-weight: 900;
      line-height: 1;
      color: rgba(255, 255, 255, .025);
      pointer-events: none;
      user-select: none;
      letter-spacing: -10px;
  }

  .nx-col-title {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      color: #ff7a1a;
      margin-bottom: 18px;
  }

  .nx-brand-name {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #fff;
      line-height: 1;
  }

  .nx-brand-name span {
      color: #ff7a1a;
  }

  .nx-brand-sub {
      font-size: 10.5px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .3);
      margin-top: 3px;
  }

  .nx-tagline {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.78;
      max-width: 310px;
  }

  .nx-divider {
      border-top: 1px solid rgba(255, 255, 255, .08);
      max-width: 310px;
  }

  .nx-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 5px;
      background: rgba(255, 122, 26, .12);
      border: 1px solid rgba(255, 122, 26, .28);
      color: #ff9a3c;
  }

  .nx-social {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .11);
      color: rgba(255, 255, 255, .65);
      text-decoration: none;
      font-size: 15px;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
      flex-shrink: 0;
  }

  .nx-social:hover {
      transform: translateY(-3px);
      color: #fff;
  }

  .nx-social.s-li:hover {
      background: #0077B5;
      border-color: #0077B5;
  }

  .nx-social.s-fb:hover {
      background: #1877F2;
      border-color: #1877F2;
  }

  .nx-social.s-tw:hover {
      background: #111;
      border-color: #555;
  }

  .nx-social.s-ig:hover {
      background: #E1306C;
      border-color: #E1306C;
  }

  .nx-social.s-wa:hover {
      background: #25D366;
      border-color: #25D366;
  }

  .nx-social.s-yt:hover {
      background: #FF0000;
      border-color: #FF0000;
  }

  .nx-social.s-tk:hover {
      background: #010101;
      border-color: #69C9D0;
      color: #69C9D0;
  }

  .nx-link {
      display: flex;
      align-items: center;
      gap: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, .52);
      text-decoration: none;
      padding: 4.5px 0;
      transition: color .15s, padding-left .15s;
      line-height: 1.4;
      position: relative;
  }

  .nx-link::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #ff7a1a;
      margin-right: 0;
      opacity: 0;
      transition: opacity .15s, margin-right .15s;
      flex-shrink: 0;
  }

  .nx-link:hover {
      color: #fff;
      padding-left: 10px;
  }

  .nx-link:hover::before {
      opacity: 1;
      margin-right: 6px;
  }

  .nx-contact-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 8px;
      background: rgba(255, 122, 26, .13);
      border: 1px solid rgba(255, 122, 26, .25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff7a1a;
      font-size: 14px;
  }

  .nx-contact-lbl {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: rgba(255, 255, 255, .35);
  }

  .nx-contact-val {
      font-size: 13px;
      color: rgba(255, 255, 255, .78);
  }

  .nx-contact-val a {
      color: rgba(255, 255, 255, .78);
      text-decoration: none;
      transition: color .15s;
  }

  .nx-contact-val a:hover {
      color: #ff7a1a;
  }

  .nx-emergency {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #ff7a1a;
      background: rgba(255, 122, 26, .1);
      border: 1px solid rgba(255, 122, 26, .22);
      border-radius: 7px;
      padding: 6px 12px;
  }

  .nx-pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ff7a1a;
      animation: nxPulse 1.6s infinite;
      flex-shrink: 0;
  }

  .nx-bottom {
      border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .nx-copy {
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
  }

  .nx-cert {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .09);
      color: rgba(255, 255, 255, .38);
  }

  /* ══════════════════════════════════════════
       FLOATING BUTTONS
    ══════════════════════════════════════════ */
  .float-btn {
      position: fixed;
      z-index: 500;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: white;
      border: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
      transition: all .3s;
  }

  @media(min-width:576px) {
      .float-btn {
          width: 40px;
          height: 40px;
      }
  }

  .float-btn:hover {
      transform: translateY(-3px);
  }

  .whatsapp-btn {
      bottom: 20px;
      right: 20px;
      background: linear-gradient(135deg, #1ebe5d, #25d366);
  }

  .whatsapp-btn:hover {
      box-shadow: 0 8px 32px rgba(37, 211, 102, .5);
  }

  .backtop-btn {
      bottom: 68px;
      right: 20px;
      font-size: 16px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
  }

  .backtop-btn.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
  }

  .backtop-btn:hover {
      box-shadow: 0 8px 32px rgba(224, 96, 0, .4);
  }

  /* ══════════════════════════════════════════
       ACCESSIBILITY — Skip link
    ══════════════════════════════════════════ */
  .skip-link {
      position: absolute;
      top: -100px;
      left: 0;
      background: var(--or);
      color: white;
      padding: 10px 20px;
      z-index: 9999;
      font-weight: 700;
      border-radius: 0 0 8px 0;
      transition: top .2s;
  }

  .skip-link:focus {
      top: 0;
  }




  /*--------------------------------------------------------------
  Faqs Section Start
--------------------------------------------------------------*/

  .faqs-section {
      background: #ffffff;
      padding: 70px 0;
  }

  .accordion-button:focus {
      box-shadow: none !important;
  }

  .faqs-section .accordion .accordion-item .accordion-header .accordion-button {
      margin-bottom: 0;
      color: #0B0B0C;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 24px;
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
      padding: 20px;
      border-radius: 20px;
  }

  .faqs-section .accordion .accordion-item .accordion-collapse .accordion-body ul li,
  .faqs-section .accordion .accordion-item .accordion-collapse .accordion-body p {
      color: rgba(0, 0, 0, 0.80);
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 28px;
      margin-bottom: 0;
  }

  .faqs-section .accordion .accordion-item .accordion-collapse .accordion-body ul li .li-heading {
      color: rgba(0, 0, 0, 0.80);
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
  }

  .faqs-section .accordion .accordion-item {
      border-radius: 20px;
      margin-bottom: 20px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      background: #FFF;
      box-shadow: 0px 0px 24px 0px rgb(0 0 0 / 9%);
  }

  .faqs-section .accordion .accordion-item .accordion-header {
      margin-bottom: 0;
  }

  .faqs-section .accordion .accordion-item .accordion-header .accordion-button::before {
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: '\f067';
      font-size: 1rem;
      transition: transform 0.2s ease;
      color: white;
      background: #f26c00;
      padding: 1px 6px;
      border-radius: 50%;
  }

  .faqs-section .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::before {
      content: '\f068';
      background: #f26c00;
  }

  .faqs-section .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
      background-color: #dddddd !important;
      border-radius: 20px 20px 0px 0px !important;
  }

  .faqs-section .accordion .accordion-item .accordion-header .accordion-button::after {
      display: none !important;
  }


  /*--------------------------------------------------------------
  Faqs Section End
--------------------------------------------------------------*/


  /* ── Service Hero ── */
  .sp-hero {
      background: #0b1d35;
      padding: 120px 0 80px;
      position: relative;
      overflow: hidden;
  }

  .sp-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 50%, rgba(224, 96, 0, .12) 0%, transparent 65%);
  }

  .sp-hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--or), var(--or2), var(--or));
  }

  .sp-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(224, 96, 0, .15);
      border: 1px solid rgba(224, 96, 0, .3);
      border-radius: 50px;
      padding: 6px 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 20px;
  }

  .sp-hero-badge .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--or);
      animation: pulse 2s infinite;
  }

  @keyframes pulse {

      0%,
      100% {
          opacity: 1;
          transform: scale(1)
      }

      50% {
          opacity: .5;
          transform: scale(1.4)
      }
  }

  .sp-hero h1 {
      font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
      font-size: clamp(40px, 7vw, 86px);
      line-height: .9;
      color: #fff;
      margin-bottom: 20px;
      letter-spacing: 1px;
  }

  .sp-hero h1 span {
      color: var(--or);
  }

  .sp-hero-desc {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(15px, 1.6vw, 17px);
      color: #9aacba;
      line-height: 1.75;
      max-width: 580px;
      margin-bottom: 32px;
  }

  .sp-hero-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 36px;
  }

  .sp-stat {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 14px 20px;
      min-width: 100px;
      text-align: center;
  }

  .sp-stat-num {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 26px;
      font-weight: 900;
      color: var(--or);
      letter-spacing: 1px;
      line-height: 1;
  }

  .sp-stat-lbl {
      font-size: 11px;
      color: #607080;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 4px;
  }

  .sp-hero-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
  }

  .sp-btn-primary {
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      font-family: 'Oswald', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 14px 28px;
      border-radius: 6px;
      border: none;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: opacity .2s, transform .2s;
  }

  .sp-btn-primary:hover {
      opacity: .9;
      transform: translateY(-2px);
      color: #fff;
  }

  .sp-btn-secondary {
      background: transparent;
      color: #fff;
      font-family: 'Oswald', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 13px 28px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, .25);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: border-color .2s, background .2s;
  }

  .sp-btn-secondary:hover {
      border-color: var(--or);
      background: rgba(224, 96, 0, .08);
      color: #fff;
  }

  /* Hero icon panel */
  .sp-hero-icon-panel {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 40px 32px;
      text-align: center;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
  }

  .sp-hero-icon {
      font-size: 72px;
      line-height: 1;
      filter: drop-shadow(0 0 24px rgba(224, 96, 0, .3));
  }

  .sp-hero-icon-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
  }

  .sp-hero-icon-sub {
      font-size: 13px;
      color: #607080;
  }

  /* ── Breadcrumb ── */
  .sp-breadcrumb {
      background: var(--off);
      padding: 14px 0;
      border-bottom: 1px solid #e2e8f0;
  }

  .sp-breadcrumb ol {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
  }

  .sp-breadcrumb li {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #607080;
  }

  .sp-breadcrumb li:not(:last-child)::after {
      content: '›';
      color: #c0cad4;
  }

  .sp-breadcrumb a {
      color: #607080;
      text-decoration: none;
  }

  .sp-breadcrumb a:hover {
      color: var(--or);
  }

  .sp-breadcrumb li:last-child {
      color: var(--or);
      font-weight: 600;
  }

  /* ── Section Labels ── */
  .sp-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--or);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .sp-section-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--or);
      flex-shrink: 0;
  }

  .sp-section-h2 {
      font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
      font-size: clamp(36px, 5vw, 64px);
      line-height: .95;
      color: #0b1d35;
      margin-bottom: 16px;
  }

  .sp-section-h2 span {
      color: var(--or);
  }

  /* ── Content Sections ── */
  .sp-what-we-do {
      background: #fff;
      padding: 80px 0;
  }

  .sp-features {
      background: var(--off);
      padding: 80px 0;
  }

  .sp-why-us {
      background: #fff;
      padding: 80px 0;
  }

  .sp-cta-band {
      background: #0b1d35;
      padding: 60px 0;
      position: relative;
      overflow: hidden;
  }

  .sp-cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(224, 96, 0, .15) 0%, transparent 60%);
  }

  .sp-related {
      background: var(--off);
      padding: 80px 0;
  }

  /* ── Feature Cards ── */
  .sp-feature-card {
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 16px;
      padding: 28px;
      height: 100%;
      transition: border-color .25s, transform .25s, box-shadow .25s;
      position: relative;
      overflow: hidden;
  }

  .sp-feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--or), var(--or2));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
  }

  .sp-feature-card:hover::before {
      transform: scaleX(1);
  }

  .sp-feature-card:hover {
      border-color: #cdd8e4;
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(11, 29, 53, .08);
  }

  .sp-feature-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(224, 96, 0, .1), rgba(255, 116, 0, .05));
      border: 1px solid rgba(224, 96, 0, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 16px;
      flex-shrink: 0;
  }

  .sp-feature-title {
      font-family: 'Oswald', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #0b1d35;
      letter-spacing: .5px;
      margin-bottom: 8px;
  }

  .sp-feature-text {
      font-size: 14px;
      color: #607080;
      line-height: 1.7;
      margin: 0;
  }

  /* ── Why Choose Cards ── */
  .sp-why-card {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 24px;
      background: var(--off);
      border-radius: 12px;
      margin-bottom: 16px;
      transition: background .2s;
  }

  .sp-why-card:hover {
      background: #eaf0f7;
  }

  .sp-why-num {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 48px;
      font-weight: 900;
      color: rgba(224, 96, 0, .15);
      line-height: 1;
      min-width: 48px;
      flex-shrink: 0;
  }

  .sp-why-title {
      font-family: 'Oswald', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #0b1d35;
      margin-bottom: 6px;
      letter-spacing: .5px;
  }

  .sp-why-text {
      font-size: 14px;
      color: #607080;
      line-height: 1.65;
      margin: 0;
  }

  /* ── Check List ── */
  .sp-check-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .sp-check-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 8px 0;
      font-size: 15px;
      color: #3a4a5c;
      border-bottom: 1px solid #eef2f6;
  }

  .sp-check-list li:last-child {
      border-bottom: none;
  }

  .sp-check-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--or), var(--or2));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
  }

  .sp-check-icon svg {
      width: 10px;
      height: 10px;
  }

  /* ── Quote Box ── */
  .sp-quote-box {
      background: #0b1d35;
      border-radius: 20px;
      padding: 36px;
      color: #fff;
      position: sticky;
      top: 100px;
  }

  .sp-quote-box h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #fff;
      margin-bottom: 4px;
  }

  .sp-quote-box h3 span {
      color: var(--or);
  }

  .sp-quote-label {
      font-size: 11px;
      color: #607080;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 20px;
  }

  .sp-quote-input {
      width: 100%;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 8px;
      padding: 11px 14px;
      color: #fff;
      font-size: 14px;
      margin-bottom: 10px;
      transition: border-color .2s;
      outline: none;
      font-family: 'DM Sans', sans-serif;
  }

  .sp-quote-input::placeholder {
      color: #607080;
  }

  .sp-quote-input:focus {
      border-color: var(--or);
  }

  .sp-quote-input option {
      background: #0b1d35;
      color: #fff;
  }

  .sp-quote-btn {
      width: 100%;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 14px;
      font-family: 'Oswald', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity .2s;
      margin-top: 6px;
  }

  .sp-quote-btn:hover {
      opacity: .9;
  }

  .sp-contact-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 0;
      color: #9aacba;
      text-decoration: none;
      font-size: 14px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      margin-top: 16px;
      transition: color .2s;
  }

  .sp-contact-link:hover {
      color: var(--or);
  }

  .sp-contact-link i {
      color: var(--or);
      width: 16px;
  }

  /* ── Related Services ── */
  .sp-related-card {
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 14px;
      padding: 24px;
      height: 100%;
      text-decoration: none;
      display: block;
      transition: border-color .25s, transform .25s, box-shadow .25s;
  }

  .sp-related-card:hover {
      border-color: var(--or);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(11, 29, 53, .08);
  }

  .sp-related-icon {
      font-size: 32px;
      margin-bottom: 12px;
  }

  .sp-related-title {
      font-family: 'Oswald', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #0b1d35;
      letter-spacing: .5px;
      margin-bottom: 6px;
  }

  .sp-related-text {
      font-size: 13px;
      color: #607080;
      margin: 0;
      line-height: 1.6;
  }

  .sp-related-arrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--or);
      font-family: 'Oswald', sans-serif;
      letter-spacing: .5px;
      text-transform: uppercase;
  }

  /* ── CTA Band ── */
  .sp-cta-title {
      font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
      font-size: clamp(34px, 5vw, 60px);
      color: #fff;
      line-height: .95;
      margin-bottom: 12px;
  }

  .sp-cta-title span {
      color: var(--or);
  }

  .sp-cta-sub {
      color: #9aacba;
      font-size: 15px;
      margin-bottom: 28px;
  }

  .sp-cta-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
  }

  .sp-cta-badge {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 50px;
      padding: 6px 14px;
      font-size: 12px;
      color: #9aacba;
      letter-spacing: .5px;
  }

  /* ── Info Box ── */
  .sp-info-box {
      background: rgba(224, 96, 0, .06);
      border-left: 4px solid var(--or);
      border-radius: 0 10px 10px 0;
      padding: 20px 24px;
      margin: 28px 0;
  }

  .sp-info-box p {
      margin: 0;
      font-size: 15px;
      color: #3a4a5c;
      line-height: 1.7;
  }

  .sp-info-box strong {
      color: #0b1d35;
  }

  /* ── Responsive tweaks ── */
  @media (max-width: 991px) {
      .sp-hero {
          padding: 100px 0 60px;
      }

      .sp-hero-icon-panel {
          padding: 28px;
          margin-top: 32px;
      }

      .sp-quote-box {
          position: static;
          margin-top: 40px;
      }
  }

  @media (max-width: 767px) {
      .sp-hero {
          padding: 90px 0 50px;
      }

      .sp-what-we-do,
      .sp-features,
      .sp-why-us,
      .sp-related {
          padding: 60px 0;
      }

      .sp-cta-band {
          padding: 48px 0;
      }

      .sp-hero-stats {
          gap: 8px;
      }

      .sp-stat {
          min-width: 80px;
          padding: 12px 14px;
      }
  }