ul li {
     list-style-type:none;
 }
 :root {
      --navy: #0F1B35;
      --navy2: #1A2F55;
      --orange: #FF5A1F;
      --orange-h: #E04A10;
      --blue: #1B5EEA;
      --blue-d: #0040C0;
      --blue-l: #EEF3FF;
      --green: #16A34A;
      --bg: #F6F8FF;
      --white: #fff;
      --text: #1A1A2E;
      --muted: #6B7280;
      --border: #E4E8F0;
      --r: 12px;
      --font: 'Inter', sans-serif;
    }

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

    html {
      scroll-behavior: smooth
    }

 

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

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

    ul {
      list-style: none
    }

    .container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px
    }

    .section {
      padding: 80px 0
    }

    .text-center {
      text-align: center
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

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

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    @keyframes floatB {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(6px)
      }
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 90, 31, .35)
      }

      70% {
        box-shadow: 0 0 0 14px rgba(255, 90, 31, 0)
      }
    }

    @keyframes marquee {
      0% {
        transform: translateX(0)
      }

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

    @keyframes marqueeRev {
      0% {
        transform: translateX(-50%)
      }

      100% {
        transform: translateX(0)
      }
    }

    @keyframes gradient {

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

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

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

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(.92)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes slideRight {
      from {
        width: 0
      }

      to {
        width: 100%
      }
    }

    .anim-fade-up {
      animation: fadeUp .7s ease both
    }

    .anim-fade-up-2 {
      animation: fadeUp .7s .15s ease both
    }

    .anim-fade-up-3 {
      animation: fadeUp .7s .3s ease both
    }

    .anim-scale {
      animation: scaleIn .6s ease both
    }

    /* ── ANNOUNCE BAR ── */
    .announce {
      background: linear-gradient(90deg, var(--navy), #0A2A70, var(--navy));
      background-size: 200% 100%;
      animation: gradient 6s ease infinite;
      color: #fff;
      text-align: center;
      padding: 11px 24px;
      font-size: 13.5px;
      font-weight: 500;
      position: relative;
      overflow: hidden;
    }

    .announce::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .06) 50%, transparent 100%);
      animation: slideRight 2s ease infinite;
    }

    .announce a {
      color: var(--orange);
      font-weight: 800;
      margin-left: 6px
    }

    .announce a:hover {
      text-decoration: underline
    }

    /* ── NAVBAR ── */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 2px 16px rgba(15, 27, 53, .07)
    }

    .navbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4 8px;
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
        padding: 0 9rem;
    }
    body.page-shypfy-new-home header li a {
        color: #000;
        font-weight: 500;
        opacity: 1;
    }
    
    ul.nav-links {
        margin: 0;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 22px;
      font-weight: 900;
      color: var(--navy)
    }

    .logo-icon {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--blue), var(--orange));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 900;
      font-size: 18px;
      animation: pulse 2.5s infinite
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2px
    }

    .nav-links>li {
      position: relative
    }

    .nav-links>li>a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 13px;
      border-radius: 7px;
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
      transition: all .2s
    }

    .nav-links>li>a:hover {
      background: var(--bg);
      color: var(--orange)
    }

    .dropdown-menu {
      position: absolute;
      top: 44px;
      left: 0;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: 0 16px 48px rgba(15, 27, 53, .13);
      padding: 12px;
      min-width: 290px !important;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px) scale(.97);
      transition: all .22s
    }

    .dropdown:hover .dropdown-menu {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0) scale(1);
      display:block;
    }

    .dropdown-menu a {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 11px 13px;
      border-radius: 8px;
      font-size: 13.5px;
      transition: background .15s
    }

    .dropdown-menu a:hover {
      background: var(--bg)
    }

    .dd-ic {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0
    }

    .dd-t strong {
      display: block;
      font-size: 13px;
      font-weight: 800;
      color: var(--navy)
    }

    .dd-t span {
      font-size: 11.5px;
      color: var(--muted)
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 9px
    }

    .n-track {
      padding: 8px 15px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all .2s
    }

    .n-track:hover {
      border-color: var(--navy)
    }

    .n-wa {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #25D366;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: transform .2s
    }

    .n-wa:hover {
      transform: scale(1.08)
    }

    .n-login {
      padding: 8px 15px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
      border: 1.5px solid var(--border);
      transition: all .2s
    }

    .n-login:hover {
      border-color: var(--navy)
    }

    .n-signup {
      padding: 10px 20px;
      border-radius: 8px;
      background: var(--orange);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      transition: all .2s;
      box-shadow: 0 4px 14px rgba(255, 90, 31, .3)
    }

    .n-signup:hover {
      background: var(--orange-h);
      transform: translateY(-1px)
    }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg, var(--navy) 0%, #12265E 55%, #0A1F50 100%);
      min-height: 640px;
      display: flex;
      align-items: center;
      overflow: hidden;
      position: relative;
    }

    .hero-grid-bg {
      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: 60px 60px
    }

    .hero-glow {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(27, 94, 234, .25) 0%, transparent 70%);
      top: -150px;
      right: -100px;
      pointer-events: none
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 56px;
      max-width: 100%;
      margin: 0 auto;
      padding: 80px 9rem;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .18);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 7px 15px;
      border-radius: 100px;
      margin-bottom: 22px
    }

    .hero-tag span {
      color: #FFB547
    }

    .hero h1 {
      font-size: clamp(30px, 4vw, 52px);
      font-weight: 900;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 22px
    }

    .hero h1 em {
      color: var(--orange);
      font-style: normal;
      background: linear-gradient(90deg, #FF5A1F, #FF8C45);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .hero-sub {
      font-size: 17px;
      color: rgba(255, 255, 255, .78);
      line-height: 1.68;
      margin-bottom: 36px;
      max-width: 510px
    }

    .hero-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 44px
    }

    .btn-hp {
      padding: 15px 30px;
      border-radius: 9px;
      font-size: 15px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      transition: all .22s;
      cursor: pointer;
      border: none
    }

    .btn-hp-primary {
      background: var(--orange);
      color: #fff;
      box-shadow: 0 6px 24px rgba(255, 90, 31, .4)
    }

    .btn-hp-primary:hover {
      background: var(--orange-h);
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(255, 90, 31, .5);
      color:#fff;
    }

    .btn-hp-outline {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .38)
    }

    .btn-hp-outline:hover {
      background: rgba(255, 255, 255, .1);
      border-color: #fff;
      color:#fff;
    }

    .hero-partner-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .42);
      margin-bottom: 12px
    }

    .hero-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .h-pill {
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .16);
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
      font-weight: 700;
      padding: 5px 13px;
      border-radius: 100px;
      transition: all .2s
    }

    .h-pill:hover {
      background: rgba(255, 255, 255, .15);
      border-color: rgba(255, 255, 255, .3)
    }

    /* Hero Visual */
    .hero-visual {
      position: relative;
      animation: fadeIn .8s .3s both
    }

    .dash-card {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 18px;
      backdrop-filter: blur(16px);
      padding: 24px;
      overflow: hidden
    }

    .dash-topbar {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 20px
    }

    .dtb-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .dtb-title {
      color: rgba(255, 255, 255, .6);
      font-size: 12px;
      font-weight: 700;
      margin-left: auto;
      letter-spacing: .04em
    }

    .dash-kpis {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px
    }

    .kpi {
      background: rgba(255, 255, 255, .07);
      border-radius: 11px;
      padding: 14px 16px
    }

    .kpi .k-lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 3px
    }

    .kpi .k-val {
      font-size: 24px;
      font-weight: 900;
      color: #fff;
      line-height: 1
    }

    .kpi .k-chg {
      font-size: 11px;
      margin-top: 3px
    }

    .green-txt {
      color: #34D399
    }

    .orange-txt {
      color: #FB923C
    }

    .ai-pill {
      background: linear-gradient(90deg, rgba(27, 94, 234, .4), rgba(255, 90, 31, .3));
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .ai-pill .ai-ic {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(27, 94, 234, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #93B4FF;
      font-size: 14px;
      flex-shrink: 0
    }

    .ai-pill .ai-t {
      font-size: 12px;
      color: rgba(255, 255, 255, .85);
      font-weight: 600
    }

    .ai-pill .ai-t span {
      color: #34D399;
      font-weight: 800
    }

    .orders-list {
      background: rgba(0, 0, 0, .25);
      border-radius: 11px;
      overflow: hidden
    }

    .o-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 13px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      font-size: 11.5px
    }

    .o-row:last-child {
      border: none
    }

    .o-id {
      color: rgba(255, 255, 255, .9);
      font-weight: 700;
      width: 76px
    }

    .o-cur {
      color: rgba(255, 255, 255, .45);
      flex: 1
    }

    .o-stat {
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 10.5px;
      font-weight: 700
    }

    .s-del {
      background: rgba(52, 211, 153, .18);
      color: #34D399
    }

    .s-trs {
      background: rgba(251, 146, 60, .18);
      color: #FB923C
    }

    .s-pen {
      background: rgba(148, 163, 184, .18);
      color: #94A3B8
    }

    /* floating badges */
    .hv-badge {
      position: absolute;
      background: #fff;
      border-radius: 12px;
      padding: 10px 15px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--navy)
    }

    .hv-b1 {
      top: -18px;
      right: -14px;
      animation: float 3.2s ease-in-out infinite
    }

    .hv-b2 {
      bottom: -18px;
      left: -18px;
      animation: floatB 3.8s ease-in-out infinite
    }

    .hv-b3 {
      bottom: 90px;
      right: -18px;
      animation: float 4.2s 1s ease-in-out infinite
    }

    .hv-bic {
      font-size: 19px
    }

    /* ── COURIER MARQUEE ── */
    .marquee-section {
      background: var(--navy);
      padding: 28px 0;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, .07)
    }

    .marquee-label {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 18px
    }

    .marquee-track {
      position: relative;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
    }

    .marquee-inner {
      display: flex;
      gap: 14px;
      width: max-content;
      animation: marquee 28s linear infinite
    }

    .marquee-inner:hover {
      animation-play-state: paused
    }

    .m-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 20px;
      border-radius: 9px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      white-space: nowrap;
      transition: all .2s;
      cursor: default
    }

    .m-logo:hover {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .25);
      transform: translateY(-2px)
    }

    .m-logo .m-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    /* ── STATS STRIP ── */
    .stats-strip {
      background: linear-gradient(135deg, var(--orange) 0%, #FF8040 100%);
      padding: 0
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr)
    }

    .s-item {
      text-align: center;
      padding: 32px 16px;
      border-right: 1px solid rgba(255, 255, 255, .2)
    }

    .s-item:last-child {
      border: none
    }

    .s-num {
      font-size: clamp(26px, 3vw, 40px);
      font-weight: 900;
      color: #fff;
      display: block;
      line-height: 1;
      margin-bottom: 6px
    }

    .s-lbl {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .8);
      font-weight: 600
    }

    /* ── SERVICES ── */
    .services {
      background: var(--bg)
    }

    .badge {
      display: inline-block;
      background: var(--blue-l);
      color: var(--blue) !important;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 100px;
      margin-bottom: 14px
    }

    .sec-title {
      font-size: clamp(26px, 3.5vw, 40px);
      font-weight: 900;
      line-height: 1.2;
      color: var(--navy);
      margin-bottom: 14px
    }

    .sec-sub {
      font-size: 16.5px;
      color: var(--muted);
      max-width: 620px;
      margin: 0 auto 48px
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px
    }

    .svc-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px 28px;
      transition: all .28s;
      position: relative;
      overflow: hidden;
      cursor: pointer
    }

    .svc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(27, 94, 234, .03), rgba(255, 90, 31, .03));
      opacity: 0;
      transition: opacity .3s
    }

    .svc-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(15, 27, 53, .12);
      border-color: transparent
    }

    .svc-card:hover::after {
      opacity: 1
    }

    .svc-card-top {
      height: 4px;
      border-radius: 2px;
      margin-bottom: 24px
    }

    .svc-icon {
      width: 52px;
      height: 52px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 20px
    }

    .ic-d2c {
      background: #FFF0EB;
      color: var(--orange)
    }

    .ic-b2b {
      background: var(--blue-l);
      color: var(--blue)
    }

    .ic-exp {
      background: #F0FDF4;
      color: #16A34A
    }

    .svc-card h3 {
      font-size: 19px;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 10px
    }

    .svc-card p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.68;
      margin-bottom: 20px
    }

    .svc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 22px
    }

    .s-tag {
      background: var(--bg);
      border: 1px solid var(--border);
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      padding: 3px 10px;
      border-radius: 100px
    }

    .svc-link {
      font-size: 14px;
      font-weight: 800;
      color: var(--orange);
      display: flex;
      align-items: center;
      gap: 7px;
      transition: gap .2s
    }

    .svc-link:hover {
      gap: 12px
    }

    /* ── MILLION MILESTONE ── */
    .milestone {
      background: linear-gradient(135deg, var(--navy) 0%, #0A2A70 100%);
      padding: 72px 0;
      text-align: center;
      overflow: hidden;
      position: relative;
    }

    .milestone::before {
      content: '';
      position: absolute;
      width: 800px;
      height: 800px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 90, 31, .12), transparent 65%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none
    }

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

    .milestone-sub {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 12px
    }

    .milestone-num {
      font-size: clamp(60px, 10vw, 110px);
      font-weight: 900;
      line-height: 1;
      background: linear-gradient(90deg, #FF5A1F, #FF8C45, #FF5A1F);
      background-size: 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient 3s ease infinite;
      display: block
    }

    .milestone-plus {
      font-size: clamp(36px, 6vw, 70px);
      font-weight: 900;
      color: var(--orange)
    }

    .milestone-label {
      font-size: clamp(18px, 2.5vw, 26px);
      font-weight: 800;
      color: #fff;
      margin-top: 10px
    }

    .milestone-desc {
      font-size: 16px;
      color: rgba(255, 255, 255, .6);
      margin-top: 12px;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto
    }

    .milestone-stats {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-top: 40px;
      flex-wrap: wrap
    }

    .ms-item {
      text-align: center
    }

    .ms-val {
      font-size: 32px;
      font-weight: 900;
      color: #fff;
      display: block
    }

    .ms-lbl {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      font-weight: 500
    }

    /* ── PERFORMANCE SECTION ── */
    .perf-section {
      background: var(--white)
    }

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

    .perf-visual {
      position: relative
    }

    .perf-dash {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px;
      box-shadow: 0 24px 64px rgba(15, 27, 53, .1)
    }

    .perf-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px
    }

    .perf-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--navy)
    }

    .perf-live {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      color: var(--green)
    }

    .perf-live::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      display: inline-block;
      animation: pulse 1.5s infinite
    }

    .courier-perf-list {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .cp-row {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .cp-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      width: 96px
    }

    .cp-bar-wrap {
      flex: 1;
      height: 8px;
      background: var(--border);
      border-radius: 100px;
      overflow: hidden
    }

    .cp-bar {
      height: 100%;
      border-radius: 100px;
      transition: width 1.5s ease
    }

    .cp-pct {
      font-size: 12px;
      font-weight: 800;
      color: var(--navy);
      width: 36px;
      text-align: right
    }

    .perf-badge-float {
      position: absolute;
      animation: float 3.5s ease-in-out infinite
    }

    .pbf1 {
      top: -20px;
      right: -20px
    }

    .pbf2 {
      bottom: 20px;
      left: -24px;
      animation-delay: 1.2s
    }

    .pfloat-card {
      background: #fff;
      border-radius: 12px;
      padding: 12px 18px;
      box-shadow: 0 8px 28px rgba(15, 27, 53, .14);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 700;
      color: var(--navy)
    }

    .pfloat-ic {
      font-size: 20px
    }

    .perf-text .badge {
      display: inline-block
    }

    .perf-text h2 {
      font-size: clamp(26px, 3.5vw, 40px);
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 16px;
      line-height: 1.2
    }

    .perf-text p {
      font-size: 16px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 28px
    }

    .perf-features {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .pf-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 20px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      transition: all .22s;
      cursor: default
    }

    .pf-item:hover {
      border-color: var(--orange);
      box-shadow: 0 6px 24px rgba(255, 90, 31, .1);
      transform: translateX(4px)
    }

    .pf-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: #FFF0EB;
      color: var(--orange);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0
    }

    .pf-text h4 {
      font-size: 14px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 4px
    }

    .pf-text p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55
    }

    /* ── TRUST CARDS ── */
    .trust-section {
      background: var(--bg)
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .trust-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 30px 26px;
      transition: all .25s;
      position: relative;
      overflow: hidden
    }

    .trust-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 2px
    }

    .trust-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 44px rgba(15, 27, 53, .1)
    }

    .tc-num {
      font-size: 11px;
      font-weight: 900;
      color: var(--orange);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .tc-icon {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      margin-bottom: 18px
    }

    .trust-card h4 {
      font-size: 17px;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 10px
    }

    .trust-card p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.68
    }

    .trust-card .tc-stat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      font-size: 12px;
      font-weight: 800;
      padding: 6px 13px;
      border-radius: 100px
    }

    /* ── WHY SHYPFY ── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .why-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 26px 22px;
      background: #fff;
      transition: all .22s
    }

    .why-card:hover {
      border-color: var(--blue);
      box-shadow: 0 8px 24px rgba(27, 94, 234, .08);
      transform: translateY(-3px)
    }

    .w-num {
      font-size: 11px;
      font-weight: 900;
      color: var(--orange);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 12px
    }

    .why-card h4 {
      font-size: 16px;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 10px
    }

    .why-card p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.65
    }

    /* ── HOW IT WORKS ── */
    .hiw {
      background: var(--bg)
    }

    .hiw-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative
    }

    .hiw-grid::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 16.67%;
      right: 16.67%;
      height: 2px;
      background: linear-gradient(90deg, var(--orange), var(--blue));
      border-radius: 2px;
      z-index: 0
    }

    .hiw-card {
      text-align: center;
      padding: 0 28px;
      position: relative;
      z-index: 1
    }

    .hiw-num {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange), #FF8C45);
      color: #fff;
      font-size: 22px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 22px;
      box-shadow: 0 6px 22px rgba(255, 90, 31, .38)
    }

    .hiw-card h4 {
      font-size: 17px;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 10px
    }

    .hiw-card p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.65
    }

    .hiw-badge {
      display: inline-block;
      margin-top: 12px;
      background: var(--blue-l);
      color: var(--blue);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 13px;
      border-radius: 100px
    }

    /* ── TESTIMONIALS ── */
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .testi-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 26px 22px
    }

    .t-stars {
      color: #F59E0B;
      margin-bottom: 14px;
      font-size: 14px
    }

    .t-quote {
      font-size: 14px;
      color: var(--text);
      line-height: 1.72;
      margin-bottom: 18px;
      font-style: italic
    }

    .t-author {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .t-av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      font-size: 15px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .t-name {
      font-size: 14px;
      font-weight: 800;
      color: var(--navy)
    }

    .t-role {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px
    }

    .t-outcome {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 5px 12px;
      background: #F0FDF4;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 800;
      color: var(--green)
    }

    /* ── INTEGRATIONS ── */
    .integrations {
      background: var(--bg)
    }

    .int-tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 40px
    }

    .int-tab {
      padding: 9px 20px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: #fff;
      color: var(--muted);
      transition: all .2s
    }

    .int-tab.active,
    .int-tab:hover {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy)
    }

    /* Logo marquee row 2 (reverse) */
    .marquee-inner-rev {
      display: flex;
      gap: 14px;
      width: max-content;
      animation: marqueeRev 32s linear infinite
    }

    .marquee-inner-rev:hover {
      animation-play-state: paused
    }

    .int-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 20px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #fff;
      font-size: 14px;
      font-weight: 800;
      color: var(--navy);
      white-space: nowrap;
      transition: all .2s;
      box-shadow: 0 2px 8px rgba(15, 27, 53, .05)
    }

    .int-logo:hover {
      border-color: var(--orange);
      box-shadow: 0 6px 20px rgba(255, 90, 31, .12);
      transform: translateY(-2px)
    }

    .int-logo .il-dot {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0
    }

    .api-box {
      margin-top: 36px;
      background: var(--navy);
      border-radius: 16px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap
    }

    .api-box-left h4 {
      font-size: 18px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 6px
    }

    .api-box-left p {
      font-size: 14px;
      color: rgba(255, 255, 255, .65)
    }

    .api-links {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .api-link {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: all .2s
    }

    .api-link-primary {
      background: var(--orange);
      color: #fff
    }

    .api-link-primary:hover {
      background: var(--orange-h)
    }

    .api-link-outline {
      border: 1.5px solid rgba(255, 255, 255, .25);
      color: #fff;
      background: transparent
    }

    .api-link-outline:hover {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(255, 255, 255, .5)
    }

    /* ── CTA BANNER ── */
    .cta-banner {
      background: linear-gradient(135deg, var(--orange) 0%, #FF8040 100%);
      padding: 72px 24px;
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .cta-banner::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .08);
      top: -200px;
      right: -100px
    }

    .cta-banner::after {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .05);
      bottom: -100px;
      left: -50px
    }

    .cta-banner h2 {
      font-size: clamp(26px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      margin-bottom: 14px;
      position: relative;
      z-index: 1
    }

    .cta-banner p {
      font-size: 17px;
      color: rgba(255, 255, 255, .88);
      margin-bottom: 34px;
      position: relative;
      z-index: 1
    }

    .cta-actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 1
    }

    .btn-white {
      padding: 15px 32px;
      border-radius: 9px;
      background: #fff;
      color: var(--orange);
      font-size: 15px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      transition: all .22s;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .15)
    }

    .btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .2)
    }

    .btn-ghost-w {
      padding: 15px 32px;
      border-radius: 9px;
      background: transparent;
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      border: 2px solid rgba(255, 255, 255, .45);
      display: inline-flex;
      align-items: center;
      gap: 9px;
      transition: all .22s
    }

    .btn-ghost-w:hover {
      background: rgba(255, 255, 255, .12);
      border-color: #fff
    }

    /* ── FOOTER ── */
    footer {
      background: var(--navy);
      color: rgba(255, 255, 255, .72);
      padding: 60px 0 30px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 40px;
      margin-bottom: 48px
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 22px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 16px
    }

    .footer-brand p {
      font-size: 14px;
      line-height: 1.72;
      max-width: 270px
    }

    .footer-contact {
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      font-size: 13px
    }

    .footer-contact a {
      color: rgba(255, 255, 255, .6);
      transition: color .2s
    }

    .footer-contact a:hover {
      color: var(--orange)
    }

    .footer-socials {
      display: flex;
      gap: 9px;
      margin-top: 16px
    }

    .soc-ic {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .7);
      font-size: 14px;
      transition: all .2s
    }

    .soc-ic:hover {
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
      transform: translateY(-2px)
    }

    .footer-col h5 {
      font-size: 12px;
      font-weight: 800;
      color: rgba(255, 255, 255, .42);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 16px
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .footer-col ul li a {
      font-size: 13.5px;
      color: rgba(255, 255, 255, .6);
      transition: color .2s
    }

    .footer-col ul li a:hover {
      color: var(--orange)
    }

    .footer-divider {
      border-top: 1px solid rgba(255, 255, 255, .09);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 12px
    }

    .legal-info {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .38)
    }

    .legal-info p {
      margin-bottom: 3px
    }

    .footer-links {
      display: flex;
      gap: 16px
    }

    .footer-links a {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .38);
      transition: color .2s
    }

    .footer-links a:hover {
      color: var(--orange)
    }

    /* ── RETURNS (4th service) ── */
    .ic-ret {
      background: #F3E8FF;
      color: #7C3AED
    }

    .svc-link-ret {
      color: #7C3AED
    }

    /* ── INDUSTRIES SECTION ── */
    .industries {
      background: var(--white)
    }

    .ind-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .ind-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px 20px;
      text-align: center;
      background: #fff;
      transition: all .25s;
      cursor: default;
      position: relative;
      overflow: hidden
    }

    .ind-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .3s
    }

    .ind-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(15, 27, 53, .1);
      border-color: transparent
    }

    .ind-card:hover::before {
      opacity: 1
    }

    .ind-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: transform .25s
    }

    .ind-card:hover .ind-icon {
      transform: scale(1.12)
    }

    .ind-card h4 {
      font-size: 15px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 6px
    }

    .ind-card p {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.55
    }

    .ind-badge {
      display: inline-block;
      margin-top: 10px;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 11px;
      border-radius: 100px
    }

    /* ── VIDEO TESTIMONIALS ── */
    .vid-testi {
      background: linear-gradient(135deg, var(--navy) 0%, #0A2A70 100%);
      padding: 80px 0
    }

    .vt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .vt-card {
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      aspect-ratio: 16/10;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      transition: all .25s
    }

    .vt-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
      border-color: rgba(255, 255, 255, .25)
    }

    .vt-thumb {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .vt-play {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
    }

    .vt-play i {
      font-size: 22px;
      color: var(--orange);
      margin-left: 4px
    }

    .vt-card:hover .vt-play {
      transform: scale(1.1);
      background: #fff;
      box-shadow: 0 12px 36px rgba(0, 0, 0, .45)
    }

    .vt-meta {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 18px;
      background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, transparent 100%)
    }

    .vt-name {
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 2px
    }

    .vt-role {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .65)
    }

    .vt-stat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 6px;
      background: rgba(255, 90, 31, .25);
      border: 1px solid rgba(255, 90, 31, .4);
      color: #FF8C45;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 100px
    }

    .vt-placeholder {
      background: linear-gradient(135deg, rgba(27, 94, 234, .25), rgba(255, 90, 31, .15));
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px;
      width: 100%;
      height: 100%
    }
.navbar-inner a.logo img {
    width: 130px;
}

.header-inner .e-con-inner {
    padding: 0;
}

.header-inner .no-position.elementor-element {
    padding: 0 !important;
}

footer#colophon .no-position.elementor-element {
    padding: 0;
}
.footer-logo img {
    width: 160px;
}

.footer-col ul {
    padding: 0;
    margin: 0;
}

.footer-col button {
    padding: 0 20px !important;
}

.footer-col input {
    margin: 0 !important;
    color:#fff;
}
footer#colophon {
    margin: 0 !important;
    padding: 0;
}

footer#colophon .e-con-inner {
    padding: 0;
}

.no-position.elementor-element {
    padding: 0;
}

.no-position.elementor-element .e-con-inner {
    padding: 0;
}
header.sicky-add nav.navbar {
    position: fixed;
    width: 100%;
}
a.whatsappbutton {
        position: fixed;
    bottom: 80px;
    right: 35px;
    z-index: 9;
    background: #25D366 !important;
    color: #FFF !important;
    PADDING: 10px !important;
    border-radius: 50%;
}

a.whatsappbutton SVG {
    FILL: #FFF;
    font-size: 36px;
}
.oncliksection {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
    margin-bottom: 0;
}
    /* ── RESPONSIVE ── */
    @media(max-width:1024px) {

      .hero-inner,
      .perf-grid {
        grid-template-columns: 1fr
      }

      .hero-visual,
      .perf-visual {
        display: none
      }

      .svc-grid,
      .trust-grid,
      .testi-grid,
      .why-grid,
      .ind-grid {
        grid-template-columns: 1fr 1fr
      }

      .stats-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr
      }

      .vt-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:768px) {
      .nav-links {
        display: none
      }

      .svc-grid,
      .trust-grid,
      .testi-grid,
      .why-grid,
      .hiw-grid,
      .vt-grid {
        grid-template-columns: 1fr
      }

      .ind-grid {
        grid-template-columns: 1fr 1fr
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr
      }

      .hiw-grid::before {
        display: none
      }

      .hero-ctas,
      .cta-actions {
        flex-direction: column;
        align-items: flex-start
      }

      .footer-grid {
        grid-template-columns: 1fr
      }

      .api-box {
        flex-direction: column
      }

      .milestone-stats {
        gap: 28px
      }
    }
    
    
    
    
    /* ══════════════════════════════════════
   RATE CALCULATOR HERO
   ══════════════════════════════════════ */
   
   .page-pricing .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.page-pricing div#content {
    padding: 0;
}


section.section.factors .container, section.section.zero-fees .container, section.section.compare-section .container, section#rate-form .container{
    padding: 0 5rem;
}
section#rate-form .container h2{
    color:#fff;
}

.page-pricing section.cta-banner a {
    color: #fff;
    border: solid 1px #fff !important;
    padding: 14px 37px;
}

.page-pricing section.cta-banner a:hover {
    color: #fff;
}

.page-pricing  section.cta-banner .cta-actions a.btn-white {
    background: #fff !important;
    color: #000;
}

section.section.compare-section .container {
    max-width: 1180px;
    margin: auto;
}

section.section.compare-section .container table.compare-table {
    border: none;
}
body.page-pricing footer .container {
    max-width:1430px;
}



section.section.compare-section .container table.compare-table tbody, section.section.compare-section .container table.compare-table td, section.section.compare-section .container table.compare-table tfoot, section.section.compare-section .container table.compare-table th, section.section.compare-section .container table.compare-table thead, section.section.compare-section .container table.compare-table tr {
    border: none;
}
   
   
   
.calc-hero{background:linear-gradient(135deg,var(--navy) 0%,#12265E 55%,#0A1F50 100%);padding:56px 0 64px;position:relative;overflow:hidden}
.calc-hero-grid{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:60px 60px}
.calc-hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(27,94,234,.25) 0%,transparent 70%);top:-200px;right:-150px;pointer-events:none}
.calc-hero-inner{position:relative;z-index:2}
.calc-header{text-align:center;margin-bottom:40px;color:#fff}
.calc-tag{margin:0; display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 15px;border-radius:100px;color:#fff}
.calc-tag i{color:var(--orange)}
.calc-header h1{font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.12;margin-bottom:14px; color:#fff;}
.calc-header h1 em{font-style:normal;background:linear-gradient(90deg,#FF5A1F,#FF8C45);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.calc-header p{font-size:16.5px;color:rgba(255,255,255,.65);max-width:620px;margin:0 auto}

/* Calculator Card */
.calc-card{background:#fff;border-radius:20px;padding:36px 36px 28px;box-shadow:0 24px 80px rgba(0,0,0,.3);position:relative;overflow:hidden; max-width:1180px; margin:auto;}
.calc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--blue),var(--green))}
.calc-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr auto;gap:14px;align-items:end}
.calc-field label{display:block;font-size:11.5px;font-weight:700;color:var(--navy);margin-bottom:6px;letter-spacing:.02em;text-transform:uppercase}
.calc-field .cf-input{margin:0;width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:var(--font);color:var(--text);background:var(--bg);transition:all .2s;outline:none}
.calc-field .cf-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(27,94,234,.08)}
.calc-field .cf-input::placeholder{color:#B0B8C8}
select.cf-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.calc-btn{padding:12px 28px;border:none;border-radius:10px;background:var(--orange);color:#fff;font-size:15px;font-weight:800;font-family:var(--font);cursor:pointer;transition:all .22s;display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 4px 16px rgba(255,90,31,.35);height:46px}
.calc-btn:hover{background:var(--orange-h);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,90,31,.45)}
.calc-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.calc-btn .spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none}

/* Dimensions row */
.dim-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.dim-toggle{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted);cursor:pointer;font-weight:600}
.dim-toggle input{accent-color:var(--blue)}

/* Second row: dimensions + value + mode */
.calc-form-row2{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px;margin-top:14px;align-items:end}

/* Reset link */
.calc-reset{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;margin-top:14px;transition:color .2s;border:none;background:none;font-family:var(--font)}
.calc-reset:hover{color:var(--orange)}

/* ── RESULTS ── */
.calc-results{margin-top:28px;display:none}
.calc-results.active{display:block;animation:fadeUp .5s ease both}
.cr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.cr-title{font-size:16px;font-weight:900;color:var(--navy)}
.cr-route{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cr-route i{color:var(--orange)}
.cr-meta{display:flex;gap:16px}
.cr-badge{padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:700}

.results-table{width:100%;border-collapse:collapse}
.results-table thead th{background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:13px 16px;text-align:left;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.results-table thead th:first-child{border-radius:10px 0 0 0}
.results-table thead th:last-child{border-radius:0 10px 0 0}
.results-table tbody td{padding:14px 16px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle}
.results-table tbody tr:last-child td{border-bottom:none}
.results-table tbody tr{transition:background .15s}
.results-table tbody tr:hover{background:var(--bg)}
.rt-courier{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)}
.rt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rt-rate{font-size:18px;font-weight:900;color:var(--navy)}
.rt-rate small{font-size:12px;font-weight:600;color:var(--muted);display:block}
.rt-tag{display:inline-block;padding:3px 10px;border-radius:100px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.tag-cheapest{background:#F0FDF4;color:var(--green)}
.tag-fastest{background:var(--blue-l);color:var(--blue)}
.tag-best{background:#FFF0EB;color:var(--orange)}
.rt-tat{font-weight:700;color:var(--navy)}
.rt-mode{font-size:12px}

/* Loading shimmer */
.shimmer-row{height:58px;background:linear-gradient(90deg,var(--bg) 25%,#E8ECF4 50%,var(--bg) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;margin-bottom:6px}

/* ── Tab Switcher ── */
.calc-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:24px}
.calc-tab{padding:13px 28px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:14.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:9px}
.calc-tab:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.calc-tab.active{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.2);font-weight:900}
.calc-tab i{font-size:16px}

/* ── Card label ── */
.calc-card-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--orange);background:rgba(255,90,31,.07);padding:8px 16px;border-radius:8px;margin-bottom:20px;letter-spacing:.02em}

/* ── CTA under results ── */
.calc-cta{margin-top:20px;padding:20px 24px;background:linear-gradient(135deg,rgba(27,94,234,.06),rgba(255,90,31,.06));border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.calc-cta-text{font-size:14px;color:var(--navy)}
.calc-cta-text strong{font-weight:900}
.calc-cta-btn{padding:11px 22px;border-radius:9px;background:var(--orange);color:#fff;font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;gap:7px;transition:all .22s;white-space:nowrap;box-shadow:0 4px 14px rgba(255,90,31,.3)}
.calc-cta-btn:hover{background:var(--orange-h);transform:translateY(-1px)}

/* ── SHARED STYLES ── */
.badge{display:inline-block;background:var(--blue-l);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:14px}
.sec-title{font-size:clamp(26px,3.5vw,40px);font-weight:900;line-height:1.2;color:var(--navy);margin-bottom:14px}
.sec-sub{font-size:16.5px;color:var(--muted);max-width:620px;margin:0 auto 48px}

/* ── PRICING FACTORS ── */
.factors{background:var(--white)}
.factors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.factor-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:32px 28px;transition:all .25s;position:relative;overflow:hidden}
.factor-card:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(15,27,53,.1);border-color:transparent}
.factor-num{position:absolute;top:20px;right:22px;font-size:52px;font-weight:900;color:rgba(15,27,53,.04);line-height:1}
.factor-icon{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:18px}
.factor-card h4{font-size:18px;font-weight:900;color:var(--navy);margin-bottom:10px}
.factor-card p{font-size:14px;color:var(--muted);line-height:1.68}
.factor-tag{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:100px}

/* ── ZERO FEES ── */
.zero-fees{background:var(--bg)}
.zero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.zero-item{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 20px;transition:all .22s}
.zero-item:hover{border-color:var(--green);box-shadow:0 6px 20px rgba(22,163,74,.08);transform:translateY(-3px)}
.zero-check{width:36px;height:36px;border-radius:10px;background:#F0FDF4;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.zero-item h5{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:4px}
.zero-item p{font-size:13px;color:var(--muted);line-height:1.55}

/* ── COMPARISON TABLE ── */
.compare-section{background:var(--white)}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;min-width:700px}
.compare-table thead th{background:var(--navy);color:#fff;font-size:13px;font-weight:800;padding:16px 18px;text-align:left;letter-spacing:.03em;white-space:nowrap}
.compare-table thead th:first-child{border-radius:12px 0 0 0}
.compare-table thead th:last-child{border-radius:0 12px 0 0}
.compare-table tbody td{padding:14px 18px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:top}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody tr:hover{background:var(--bg)}
.compare-table tbody td:first-child{font-weight:700;color:var(--navy)}
.t-check{color:var(--green);font-weight:800}
.t-dash{color:var(--border);font-weight:400}
.t-highlight{background:rgba(27,94,234,.03)}

/* ── RATE FORM ── */
.rate-form-section{background:linear-gradient(135deg,var(--navy) 0%,#0A2A70 100%);padding:80px 0;position:relative;overflow:hidden}
.rate-form-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.15) 0%,transparent 70%);bottom:-200px;right:-100px;pointer-events:none}
.rate-form-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.rf-left{color:#fff}
.rf-left h2{font-size:clamp(26px,3.5vw,40px);font-weight:900;line-height:1.2;margin-bottom:16px}
.rf-left h2 em{color:var(--orange);font-style:normal}
.rf-left>p{font-size:16px;color:rgba(255,255,255,.65);line-height:1.72;margin-bottom:36px}
.rf-benefits{display:flex;flex-direction:column;gap:14px}
.rfb{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:all .22s}
.rfb:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateX(4px)}
.rfb-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.rfb-text h5{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px}
.rfb-text p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55}
.rate-form-card{background:#fff;border-radius:20px;padding:36px 32px;box-shadow:0 24px 80px rgba(0,0,0,.3);position:relative;overflow:hidden;animation:scaleIn .6s .2s ease both}
.rate-form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--blue),var(--green));border-radius:20px 20px 0 0}
.form-header{margin-bottom:28px}
.form-header h3{font-size:20px;font-weight:900;color:var(--navy);margin-bottom:8px}
.form-header p{font-size:14px;color:var(--muted);line-height:1.6}
.form-row{margin-bottom:16px}
.form-row-half{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.form-row label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.form-row label .req{color:var(--orange);margin-left:2px}
.form-input{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:var(--font);color:var(--text);background:var(--bg);transition:all .2s;outline:none}
.form-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(27,94,234,.08)}
.form-input::placeholder{color:#B0B8C8}
select.form-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.form-submit{width:100%;padding:16px 24px;border:none;border-radius:10px;background:var(--orange);color:#fff;font-size:16px;font-weight:800;font-family:var(--font);cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 24px rgba(255,90,31,.35);margin-top:6px}
.form-submit:hover{background:var(--orange-h);transform:translateY(-2px);box-shadow:0 10px 32px rgba(255,90,31,.45)}
.form-note{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}
.form-note i{margin-right:4px}

/* ── FAQ ── */
.faq-section{background:var(--bg)}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all .22s}
.faq-item:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(27,94,234,.06)}
.faq-q{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px;font-weight:700;color:var(--navy);transition:all .2s;gap:16px}
.faq-q:hover{color:var(--orange)}
.faq-q i{font-size:12px;color:var(--muted);transition:transform .3s;flex-shrink:0}
.faq-item.active .faq-q i{transform:rotate(180deg);color:var(--orange)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-item.active .faq-a{max-height:300px;padding:0 24px 20px}
.faq-a p{font-size:14px;color:var(--muted);line-height:1.72}

/* ── CTA BANNER ── */
.cta-banner{background:linear-gradient(135deg,var(--orange) 0%,#FF8040 100%);padding:72px 24px;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.08);top:-200px;right:-100px}
.cta-banner h2{font-size:clamp(26px,3.5vw,42px);font-weight:900;color:#fff;margin-bottom:14px;position:relative;z-index:1}
.cta-banner p{font-size:17px;color:rgba(255,255,255,.88);margin-bottom:34px;position:relative;z-index:1}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.btn-white{padding:15px 32px;border-radius:9px;background:#fff;color:var(--orange);font-size:15px;font-weight:900;display:inline-flex;align-items:center;gap:9px;transition:all .22s;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.btn-ghost-w{padding:15px 32px;border-radius:9px;background:transparent;color:#fff;font-size:15px;font-weight:800;border:2px solid rgba(255,255,255,.45);display:inline-flex;align-items:center;gap:9px;transition:all .22s}
.btn-ghost-w:hover{background:rgba(255,255,255,.12);border-color:#fff}




/*dc2 new*/