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

    :root {
      --orange: #FF9900;
      --orange-dark: #E68A00;
      --orange-light: #FFF7EB;
      --navy: #0A1628;
      --navy-light: #12203A;
      --white: #FFF;
      --cream: #FFFAF3;
      --g50: #F8FAFB;
      --g100: #F0F2F5;
      --g200: #E2E6EB;
      --g400: #8B95A5;
      --g600: #5A6577;
      --g800: #2D3748;
      --green: #10B981;
      --gold: #F59E0B;
      --fd: 'Fraunces', Georgia, serif;
      --fb: 'Outfit', system-ui, sans-serif;
      --r: 16px;
      --rl: 24px;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--fb);
      color: var(--g800);
      line-height: 1.65;
      background: var(--white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
    }

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

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

    @keyframes slideL {
      from {
        opacity: 0;
        transform: translateX(-50px)
      }

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

    @keyframes slideR {
      from {
        opacity: 0;
        transform: translateX(50px)
      }

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

    @keyframes shimmer {
      0% {
        background-position: -200% center
      }

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

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

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

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

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, .4)
      }

      70% {
        box-shadow: 0 0 0 15px rgba(255, 153, 0, 0)
      }
    }

    @keyframes glow {

      0%,
      100% {
        opacity: .4
      }

      50% {
        opacity: .8
      }
    }

    @keyframes float {

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

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

    @keyframes dotPulse {

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

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

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

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

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

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: all .8s cubic-bezier(.16, 1, .3, 1)
    }

    .reveal.v {
      opacity: 1;
      transform: translateY(0)
    }

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

    .reveal-l.v {
      opacity: 1;
      transform: translateX(0)
    }

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

    .reveal-r.v {
      opacity: 1;
      transform: translateX(0)
    }

    .stagger>* {
      opacity: 0;
      transform: translateY(30px);
      transition: all .6s cubic-bezier(.16, 1, .3, 1)
    }

    .stagger.v>*:nth-child(1) {
      transition-delay: 0s;
      opacity: 1;
      transform: translateY(0)
    }

    .stagger.v>*:nth-child(2) {
      transition-delay: .1s;
      opacity: 1;
      transform: translateY(0)
    }

    .stagger.v>*:nth-child(3) {
      transition-delay: .2s;
      opacity: 1;
      transform: translateY(0)
    }

    .stagger.v>*:nth-child(4) {
      transition-delay: .3s;
      opacity: 1;
      transform: translateY(0)
    }

    .stagger.v>*:nth-child(5) {
      transition-delay: .4s;
      opacity: 1;
      transform: translateY(0)
    }

    .stagger.v>*:nth-child(6) {
      transition-delay: .5s;
      opacity: 1;
      transform: translateY(0)
    }

    .con {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px
    }

    .sp {
      padding: 100px 0
    }

    .tc {
      text-align: center
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 17px 38px;
      border-radius: 60px;
      font-family: var(--fb);
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: all .35s cubic-bezier(.16, 1, .3, 1);
      letter-spacing: .8px;
      text-transform: uppercase;
      position: relative;
      overflow: hidden
    }

    .btn svg {
      width: 18px;
      height: 18px;
      transition: transform .3s
    }

    .btn:hover svg {
      transform: translateX(3px)
    }

    .btn-p {
      background: linear-gradient(135deg, var(--orange), #FFB347);
      color: var(--white);
      box-shadow: 0 6px 25px rgba(255, 153, 0, .4)
    }

    .btn-p:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 10px 40px rgba(255, 153, 0, .5)
    }

    .btn-p::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
      background-size: 200% 100%;
      animation: shimmer 2.5s ease infinite
    }

    .btn-g {
      background: transparent;
      color: var(--white);
      border: 2px solid rgba(255, 255, 255, .25);
      backdrop-filter: blur(4px)
    }

    .btn-g:hover {
      border-color: var(--orange);
      color: var(--orange);
      background: rgba(255, 153, 0, .05)
    }

    .btn-w {
      background: var(--white);
      color: var(--navy);
      box-shadow: 0 8px 30px rgba(0, 0, 0, .08)
    }

    .btn-w:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .12)
    }

    /* NAVBAR */
    .nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: rgba(10, 22, 40, .97);
      backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 0 4px 30px rgba(0, 0, 0, .15);
      transition: all .4s
    }

    .nav-in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 24px;
      max-width: 1200px;
      margin: 0 auto
    }

    .nav-logo {
      font-family: var(--fd);
      font-size: 17px;
      font-weight: 800;
      color: var(--white);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .nav-logo-i {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--orange), #FFB347);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--fd);
      font-size: 19px;
      font-weight: 900;
      color: var(--white)
    }

    .nav-logo span {
      color: var(--orange)
    }

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

    .nav-link {
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      transition: all .3s;
      letter-spacing: .2px
    }

    .nav-link:hover {
      color: var(--white);
      background: rgba(255, 255, 255, .06)
    }

    .nav-link.active {
      color: var(--orange);
      background: rgba(255, 153, 0, .08)
    }

    .nav-acts {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .nav-ph {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, .8);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      transition: color .3s
    }

    .nav-ph:hover {
      color: var(--orange)
    }

    .nav-ph svg {
      width: 16px;
      height: 16px
    }

    .nav-btn {
      padding: 10px 26px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      border: none;
      cursor: pointer;
      background: linear-gradient(135deg, var(--orange), #FFB347);
      color: var(--white);
      transition: all .3s;
      text-decoration: none
    }

    .nav-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 153, 0, .4)
    }

    /* HERO */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: var(--navy);
      overflow: hidden;
      padding: 140px 0 80px
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      overflow: hidden
    }

    .hero-bg-grad {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 100% 80% at 10% 90%, rgba(255, 153, 0, .1) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 85% 10%, rgba(255, 153, 0, .06) 0%, transparent 50%)
    }

    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px)
    }

    .ho1 {
      width: 500px;
      height: 500px;
      background: rgba(255, 153, 0, .15);
      top: -100px;
      right: -100px;
      opacity: .3;
      animation: glow 6s ease infinite
    }

    .ho2 {
      width: 400px;
      height: 400px;
      background: rgba(255, 153, 0, .08);
      bottom: -80px;
      left: -80px;
      opacity: .3;
      animation: glow 8s ease 2s infinite
    }

    .hero-gp {
      position: absolute;
      inset: 0;
      opacity: .03;
      background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
      background-size: 60px 60px
    }

    .hero-parts {
      position: absolute;
      inset: 0
    }

    .pt {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--orange);
      opacity: .3
    }

    .pt:nth-child(1) {
      top: 15%;
      left: 20%;
      animation: float 6s ease infinite, dotPulse 4s ease infinite
    }

    .pt:nth-child(2) {
      top: 35%;
      left: 65%;
      animation: float 8s ease 1s infinite;
      width: 3px;
      height: 3px
    }

    .pt:nth-child(3) {
      top: 70%;
      left: 30%;
      animation: float 7s ease 2s infinite;
      width: 5px;
      height: 5px
    }

    .pt:nth-child(4) {
      top: 25%;
      left: 80%;
      animation: float 5s ease .5s infinite;
      width: 3px;
      height: 3px
    }

    .pt:nth-child(5) {
      top: 80%;
      left: 75%;
      animation: float 9s ease 1.5s infinite
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 10
    }

    .hero-l {
      animation: slideL 1s cubic-bezier(.16, 1, .3, 1) forwards
    }

    .hero-pre {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, rgba(255, 153, 0, .15), rgba(255, 153, 0, .05));
      border: 1px solid rgba(255, 153, 0, .2);
      padding: 8px 20px;
      border-radius: 60px;
      margin-bottom: 24px;
      animation: fadeUp .8s ease .2s both
    }

    .hero-pre-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
      animation: pulse 2s ease infinite
    }

    .hero-pre span {
      color: var(--orange);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px
    }

    .hero h1 {
      font-family: var(--fd);
      font-size: clamp(36px, 4.8vw, 60px);
      font-weight: 800;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 24px;
      animation: fadeUp .8s ease .3s both
    }

    .hero h1 .hl {
      position: relative;
      display: inline;
      background: linear-gradient(135deg, var(--orange), #FFD080);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .hero h1 .hl::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--orange), transparent);
      border-radius: 2px;
      opacity: .5
    }

    .hero-desc {
      font-size: 18px;
      color: rgba(255, 255, 255, .65);
      line-height: 1.75;
      margin-bottom: 16px;
      max-width: 540px;
      animation: fadeUp .8s ease .4s both
    }

    .hero-plat {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 32px;
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      animation: fadeUp .8s ease .45s both;
      flex-wrap: wrap
    }

    .hero-plat strong {
      color: rgba(255, 255, 255, .7)
    }

    .hero-ctas {
      display: flex;
      gap: 16px;
      margin-bottom: 40px;
      flex-wrap: wrap;
      animation: fadeUp .8s ease .5s both
    }

    .hero-sp {
      display: flex;
      align-items: center;
      gap: 20px;
      animation: fadeUp .8s ease .6s both
    }

    .hero-avs {
      display: flex
    }

    .hero-av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 3px solid var(--navy);
      margin-left: -10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: var(--white);
      overflow: hidden
    }

    .hero-av img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .hero-av:first-child {
      margin-left: 0
    }

    .hero-av:nth-child(4) {
      background: linear-gradient(135deg, var(--orange), #FFB347);
      font-size: 11px
    }

    .hero-spt {
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.4
    }

    .hero-spt strong {
      color: var(--white);
      font-weight: 700
    }

    .hero-spt .stars {
      color: var(--gold);
      letter-spacing: 1px
    }

    .hero-r {
      animation: slideR 1s cubic-bezier(.16, 1, .3, 1) .3s both
    }

    /* HERO FORM */
    .hf {
      background: var(--white);
      border-radius: var(--rl);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
      position: relative
    }

    .hf::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--orange), #FFD080, var(--orange));
      background-size: 200% 100%;
      animation: gradFlow 3s ease infinite
    }

    .hf-top {
      padding: 28px 30px 0
    }

    .hf-top h3 {
      font-family: var(--fd);
      font-size: 21px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 4px;
      text-align: center
    }

    .hf-top p {
      color: var(--g600);
      font-size: 14px;
      text-align: center
    }

    .hf-urg {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
      border: 1px solid #FDE68A;
      border-radius: 10px;
      padding: 8px 16px;
      margin-top: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #92400E
    }

    .hf-urg svg {
      width: 16px;
      height: 16px;
      color: var(--gold);
      flex-shrink: 0
    }

    .hf-body {
      padding: 20px 30px 28px
    }

    .fr {
      margin-bottom: 14px
    }

    .fr label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--g800);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .fr input,
    .fr select,
    .fr textarea {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--g200);
      border-radius: 12px;
      font-family: var(--fb);
      font-size: 14px;
      transition: all .3s;
      background: var(--g50);
      color: var(--g800);
      appearance: none;
      -webkit-appearance: none
    }

    .fr select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95A5' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px
    }

    .fr input:focus,
    .fr select:focus {
      outline: none;
      border-color: var(--orange);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(255, 153, 0, .1)
    }

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

    .hf-sub {
      width: 100%;
      padding: 16px;
      border: none;
      border-radius: 60px;
      background: linear-gradient(135deg, var(--orange), #FFB347);
      color: var(--white);
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      transition: all .35s;
      box-shadow: 0 6px 25px rgba(255, 153, 0, .35);
      margin-top: 6px;
      position: relative;
      overflow: hidden
    }

    .hf-sub:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 35px rgba(255, 153, 0, .5)
    }

    .hf-sub::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
      background-size: 200% 100%;
      animation: shimmer 2.5s ease infinite
    }

    .hf-note {
      text-align: center;
      margin-top: 12px;
      font-size: 12px;
      color: var(--g400);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px
    }

    .hf-note svg {
      width: 14px;
      height: 14px;
      color: var(--green)
    }

    /* TRUST BAR */
    .tb {
      background: var(--white);
      border-bottom: 1px solid var(--g200);
      padding: 24px 0;
      position: relative;
      z-index: 5
    }

    .tb-in {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap
    }

    .tb-i {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .tb-mobile {
      display: none;
      overflow: hidden;
      position: relative
    }

    .tb-mobile::before,
    .tb-mobile::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 32px;
      z-index: 2;
      pointer-events: none
    }

    .tb-mobile::before {
      left: 0;
      background: linear-gradient(90deg, var(--white), transparent)
    }

    .tb-mobile::after {
      right: 0;
      background: linear-gradient(270deg, var(--white), transparent)
    }

    .tb-track {
      display: flex;
      gap: 32px;
      width: max-content;
      animation: tbScroll 18s linear infinite
    }

    .tb-track .tb-i {
      flex-shrink: 0;
      min-width: max-content
    }

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

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

    .tb-ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--orange-light);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .tb-ic svg {
      width: 22px;
      height: 22px;
      color: var(--orange)
    }

    .tb-tx {
      font-size: 13px;
      color: var(--g600);
      line-height: 1.3
    }

    .tb-tx strong {
      display: block;
      font-size: 16px;
      color: var(--navy);
      font-weight: 800
    }

    /* SECTION HEADERS */
    .sl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange-light);
      border: 1px solid rgba(255, 153, 0, .15);
      padding: 6px 18px;
      border-radius: 60px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--orange-dark);
      margin-bottom: 16px
    }

    .st {
      font-family: var(--fd);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.15;
      margin-bottom: 14px
    }

    .ss {
      color: var(--g600);
      font-size: 17px;
      max-width: 580px;
      margin: 0 auto 60px
    }

    /* HOW IT WORKS */
    .hiw {
      background: var(--cream);
      position: relative;
      overflow: hidden
    }

    .hiw::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 153, 0, .06), transparent 70%);
      pointer-events: none
    }

    .steps-line {
      position: absolute;
      top: 56px;
      left: 16.5%;
      right: 16.5%;
      height: 3px;
      background: linear-gradient(90deg, var(--orange), rgba(255, 153, 0, .2), var(--orange));
      border-radius: 2px;
      z-index: 0
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      position: relative;
      z-index: 1
    }

    .step {
      text-align: center;
      padding: 0 16px;
      transition: transform .4s cubic-bezier(.16, 1, .3, 1)
    }

    .step:hover {
      transform: translateY(-8px)
    }

    .step-nw {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--white);
      box-shadow: 0 8px 30px rgba(255, 153, 0, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      position: relative
    }

    .step-nw::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px dashed rgba(255, 153, 0, .25);
      animation: spin 20s linear infinite
    }

    .step-n {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange), #FFB347);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--fd);
      font-size: 22px;
      font-weight: 800;
      box-shadow: 0 4px 15px rgba(255, 153, 0, .3)
    }

    .step h3 {
      font-family: var(--fd);
      font-size: 20px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 10px
    }

    .step p {
      color: var(--g600);
      font-size: 15px;
      line-height: 1.65;
      max-width: 280px;
      margin: 0 auto
    }

    /* PORTFOLIO */
    .port {
      background: var(--navy);
      position: relative;
      overflow: hidden;
      padding: 80px 0
    }

    .port::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 153, 0, .06), transparent 60%)
    }

    .port .sl {
      background: rgba(255, 153, 0, .12);
      border-color: rgba(255, 153, 0, .2)
    }

    .port .st {
      color: var(--white)
    }

    .port .ss {
      color: rgba(255, 255, 255, .55)
    }

    .bm {
      overflow: hidden;
      position: relative;
      z-index: 1;
      margin-top: 40px
    }

    .bt {
      display: flex;
      gap: 24px;
      animation: marquee 30s linear infinite;
      width: max-content
    }

    .bc {
      width: 160px;
      height: 220px;
      border-radius: 12px;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .08);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .4s
    }

    .bc:hover {
      transform: scale(1.08);
      border-color: rgba(255, 153, 0, .3);
      box-shadow: 0 0 60px rgba(255, 153, 0, .2)
    }

    .bc-in {
      text-align: center;
      padding: 16px
    }

    .bc-icon {
      font-size: 48px;
      margin-bottom: 8px
    }

    .bc-in span {
      display: block;
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px
    }

    /* TESTIMONIALS */
    .testi {
      background: var(--g50)
    }

    .testi-g {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .tc-card {
      background: var(--white);
      border-radius: var(--rl);
      padding: 32px;
      border: 1px solid var(--g200);
      transition: all .4s;
      position: relative;
      overflow: hidden
    }

    .tc-card::before {
      content: '\201C';
      position: absolute;
      top: 16px;
      right: 24px;
      font-family: var(--fd);
      font-size: 80px;
      color: rgba(255, 153, 0, .08);
      line-height: 1;
      font-weight: 800
    }

    .tc-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .12);
      border-color: transparent
    }

    .tc-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 16px
    }

    .tc-stars svg {
      width: 18px;
      height: 18px;
      fill: var(--gold)
    }

    .tc-card blockquote {
      font-size: 15px;
      color: var(--g600);
      line-height: 1.7;
      margin-bottom: 24px
    }

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

    .tc-av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 16px;
      color: var(--white)
    }

    .tc-av-1 {
      background: linear-gradient(135deg, #6366F1, #8B5CF6)
    }

    .tc-av-2 {
      background: linear-gradient(135deg, #EC4899, #F43F5E)
    }

    .tc-av-3 {
      background: linear-gradient(135deg, #14B8A6, #10B981)
    }

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

    .tc-role {
      font-size: 13px;
      color: var(--g400)
    }

    .tc-plat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      color: var(--g400);
      background: var(--g50);
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 4px
    }

    /* PRICING */
    .prc {
      background: var(--navy);
      position: relative;
      overflow: hidden
    }

    .prc::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 40% at 25% 20%, rgba(255, 153, 0, .06), transparent 60%), radial-gradient(ellipse 60% 40% at 75% 80%, rgba(255, 153, 0, .04), transparent 60%)
    }

    .prc .sl {
      background: rgba(255, 153, 0, .12);
      border-color: rgba(255, 153, 0, .2)
    }

    .prc .st {
      color: var(--white)
    }

    .prc .ss {
      color: rgba(255, 255, 255, .55)
    }

    .prc-offer {
      text-align: center;
      margin-bottom: 48px;
      position: relative;
      z-index: 1
    }

    .prc-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, rgba(255, 153, 0, .15), rgba(255, 153, 0, .05));
      border: 1px solid rgba(255, 153, 0, .25);
      padding: 10px 24px;
      border-radius: 60px;
      color: #FFD080;
      font-size: 14px;
      font-weight: 700
    }

    .prc-badge svg {
      width: 18px;
      height: 18px
    }

    .prc-g {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
      z-index: 1
    }

    .pc {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--rl);
      padding: 36px 28px;
      position: relative;
      transition: all .5s cubic-bezier(.16, 1, .3, 1);
      overflow: hidden
    }

    .pc::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 153, 0, .08), transparent 60%);
      transition: opacity .5s
    }

    .pc:hover::before {
      opacity: 1
    }

    .pc:hover {
      transform: translateY(-10px);
      border-color: rgba(255, 153, 0, .2)
    }

    .pc.feat {
      background: rgba(255, 153, 0, .06);
      border-color: rgba(255, 153, 0, .3);
      box-shadow: 0 0 60px rgba(255, 153, 0, .1);
      transform: scale(1.04)
    }

    .pc.feat:hover {
      transform: scale(1.04) translateY(-10px)
    }

    .pc-badge {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--orange), #FFB347);
      color: var(--white);
      padding: 6px 24px;
      border-radius: 0 0 12px 12px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px
    }

    .pc-head {
      text-align: center;
      margin-bottom: 24px
    }

    .pc-head h3 {
      font-family: var(--fd);
      font-size: 22px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 16px
    }

    .pc-amt {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px
    }

    .pc-old {
      font-size: 18px;
      color: rgba(255, 255, 255, .35);
      text-decoration: line-through
    }

    .pc-cur {
      font-family: var(--fd);
      font-size: 48px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--orange), #FFD080);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .pc-per {
      font-size: 14px;
      color: rgba(255, 255, 255, .4)
    }

    .pc-desc {
      text-align: center;
      font-size: 13px;
      color: rgba(255, 255, 255, .4);
      margin-top: 6px
    }

    .pc-div {
      height: 1px;
      background: rgba(255, 255, 255, .08);
      margin: 24px 0
    }

    .pc-feat {
      list-style: none;
      margin-bottom: 28px
    }

    .pc-feat li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 7px 0;
      color: rgba(255, 255, 255, .7);
      font-size: 14px;
      line-height: 1.5
    }

    .pc-feat li svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--green)
    }

    .pc .btn {
      width: 100%;
      justify-content: center
    }

    .pc-contact {
      display: flex;
      gap: 12px;
      margin-top: 12px;
      justify-content: center
    }

    .pc-contact a {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      transition: color .3s;
      display: flex;
      align-items: center;
      gap: 5px
    }

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

    .pc-contact a svg {
      width: 14px;
      height: 14px
    }

    /* FAQ */
    .faq {
      background: var(--white)
    }

    .faq-g {
      max-width: 780px;
      margin: 0 auto
    }

    .faq-i {
      border: 1px solid var(--g200);
      border-radius: 16px;
      margin-bottom: 12px;
      overflow: hidden;
      transition: all .3s
    }

    .faq-i:hover {
      border-color: rgba(255, 153, 0, .2)
    }

    .faq-i.act {
      border-color: var(--orange);
      box-shadow: 0 4px 20px rgba(255, 153, 0, .08)
    }

    .faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      cursor: pointer;
      font-weight: 700;
      font-size: 16px;
      color: var(--navy);
      transition: color .3s;
      background: var(--white)
    }

    .faq-i.act .faq-q {
      color: var(--orange)
    }

    .faq-q svg {
      width: 20px;
      height: 20px;
      color: var(--g400);
      flex-shrink: 0;
      transition: all .4s
    }

    .faq-i.act .faq-q svg {
      transform: rotate(180deg);
      color: var(--orange)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s cubic-bezier(.16, 1, .3, 1)
    }

    .faq-i.act .faq-a {
      max-height: 300px
    }

    .faq-a-in {
      padding: 0 24px 20px;
      font-size: 15px;
      color: var(--g600);
      line-height: 1.7
    }

    /* FINAL CTA */
    .fcta {
      background: var(--navy);
      position: relative;
      overflow: hidden;
      padding: 100px 0
    }

    .fcta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 153, 0, .1), transparent 60%), radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 153, 0, .05), transparent 50%)
    }

    .fcta-in {
      text-align: center;
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin: 0 auto
    }

    .fcta h2 {
      font-family: var(--fd);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 800;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 16px
    }

    .fcta h2 .hl {
      background: linear-gradient(135deg, var(--orange), #FFD080);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .fcta p {
      color: rgba(255, 255, 255, .6);
      font-size: 18px;
      margin-bottom: 36px;
      line-height: 1.7
    }

    .fcta-btns {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 32px
    }

    .fcta-trust {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap
    }

    .fcta-ti {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      font-weight: 500
    }

    .fcta-ti svg {
      width: 16px;
      height: 16px;
      color: var(--green)
    }

    /* FOOTER */
    .foot {
      background: #060E1A;
      border-top: 1px solid rgba(255, 255, 255, .05);
      padding: 48px 0 24px
    }

    .foot-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      flex-wrap: wrap
    }

    .foot-brand {
      font-family: var(--fd);
      font-size: 18px;
      font-weight: 800;
      color: var(--white)
    }

    .foot-brand span {
      color: var(--orange)
    }

    .foot-links {
      display: flex;
      gap: 24px;
      flex-wrap: wrap
    }

    .foot-links a {
      color: rgba(255, 255, 255, .45);
      text-decoration: none;
      font-size: 14px;
      transition: color .3s
    }

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

    .foot-contact {
      display: flex;
      gap: 20px;
      flex-wrap: wrap
    }

    .foot-contact a {
      display: flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      font-size: 14px;
      transition: color .3s
    }

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

    .foot-contact a svg {
      width: 16px;
      height: 16px
    }

    .foot-bottom {
      padding-top: 24px;
      text-align: center
    }

    .foot-copy {
      font-size: 12px;
      color: rgba(255, 255, 255, .25);
      line-height: 1.6
    }

    .foot-disc {
      font-size: 11px;
      color: rgba(255, 255, 255, .15);
      max-width: 700px;
      margin: 12px auto 0;
      line-height: 1.5
    }

    /* STICKY MOBILE CTA */
    /* STICKY MOBILE CTA - slim top bar */
    .smcta {
      display: none
    }

    .smcta-call {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 20px;
      text-decoration: none;
      color: var(--white);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .6px;
      text-transform: uppercase;
      width: 100%;
      position: relative;
      overflow: hidden
    }

    .smcta-call::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .2) 50%, transparent 100%);
      background-size: 200% 100%;
      animation: shimmer 3s ease infinite
    }

    .smcta-call svg {
      width: 18px;
      height: 18px;
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5))
    }

    .smcta-call span {
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0
    }

    .smcta-call span.smcta-dot {
      opacity: .45;
      font-size: 8px;
      vertical-align: middle
    }

    .btn-sm {
      padding: 13px 28px;
      font-size: 13px
    }

    /* PORTFOLIO MARQUEE */
    @keyframes portScroll {
      0% {
        transform: translateX(0)
      }

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

    .port-marquee {
      overflow: hidden;
      position: relative;
      padding: 8px 0 16px
    }

    .port-marquee::before,
    .port-marquee::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 4;
      pointer-events: none
    }

    .port-marquee::before {
      left: 0;
      background: linear-gradient(90deg, var(--navy), transparent)
    }

    .port-marquee::after {
      right: 0;
      background: linear-gradient(270deg, var(--navy), transparent)
    }

    .port-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: portScroll 45s linear infinite
    }

    .port-marquee:hover .port-track {
      animation-play-state: paused
    }

    .pcard {
      width: 230px;
      flex-shrink: 0;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all .45s cubic-bezier(.16, 1, .3, 1)
    }

    .pcard:hover {
      transform: translateY(-10px) scale(1.04)
    }

    .pcard-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .6s
    }

    .pcard:hover .pcard-bg {
      transform: scale(1.08)
    }

    .pcard-img {
      aspect-ratio: 2/3
    }

    .pcard-glow {
      position: absolute;
      inset: -2px;
      border-radius: 20px;
      background: conic-gradient(from var(--angle, 0deg), transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
      opacity: 0;
      transition: opacity .4s;
      z-index: 0;
      filter: blur(8px)
    }

    .pcard:hover .pcard-glow {
      opacity: .5
    }

    .pcard::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      z-index: 3;
      pointer-events: none;
      transition: border-color .3s
    }

    .pcard:hover::after {
      border-color: rgba(255, 255, 255, .22)
    }

    .pcard-shine {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .1) 0%, transparent 60%);
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s
    }

    .pcard:hover .pcard-shine {
      opacity: 1
    }

    .pcard-feat {
      box-shadow: 0 0 30px -6px rgba(255, 153, 0, .25)
    }

    .pcard-feat::after {
      border-color: rgba(255, 153, 0, .2)
    }

    /* CASE STUDIES */
    .case-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px
    }

    .case-card {
      background: var(--white);
      border-radius: var(--rl);
      border: 1px solid var(--g200);
      overflow: hidden;
      transition: all .4s;
      display: flex;
      flex-direction: column;
    }

    .case-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .1);
      border-color: transparent
    }

    .case-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      background: var(--g50);
      border-bottom: 1px solid var(--g200)
    }

    .case-badge {
      padding: 5px 14px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 700;
      color: var(--white);
      text-transform: uppercase;
      letter-spacing: .8px
    }

    .case-metric {
      text-align: right
    }

    .case-metric span {
      display: block;
      font-family: var(--fd);
      font-size: 20px;
      font-weight: 800;
      color: var(--navy)
    }

    .case-metric {
      font-size: 12px;
      color: var(--g600)
    }

    .case-body {
      padding: 24px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .case-body h4 {
      font-family: var(--fd);
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 12px;
      line-height: 1.4;
      font-style: italic
    }

    .case-body p {
      font-size: 14px;
      color: var(--g600);
      line-height: 1.65;
      margin-bottom: 16px
    }

    .case-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    .case-results {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--g200);
      margin-top: auto;
    }

    .case-stat {
      padding: 16px 5px;
      text-align: center;
      border-right: 1px solid var(--g200)
    }

    .case-stat:last-child {
      border-right: none
    }

    .case-stat strong {
      display: block;
      font-family: var(--fd);
      font-size: 20px;
      font-weight: 800;
      color: var(--orange);
      margin-bottom: 2px
    }

    .case-stat span {
      font-size: 11px;
      color: var(--g400);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    /* WHO THIS IS FOR V2 */
    .fit2-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px
    }

    .fit2-card {
      position: relative;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 24px;
      padding: 40px 32px;
      overflow: hidden;
      transition: all .4s
    }

    .fit2-card:hover {
      transform: translateY(-6px)
    }

    .fit2-yes:hover {
      border-color: rgba(16, 185, 129, .25);
      box-shadow: 0 24px 60px rgba(16, 185, 129, .08)
    }

    .fit2-no:hover {
      border-color: rgba(239, 68, 68, .2);
      box-shadow: 0 24px 60px rgba(239, 68, 68, .05)
    }

    .fit2-glow-yes {
      position: absolute;
      top: -60px;
      right: -60px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 70%);
      pointer-events: none
    }

    .fit2-glow-no {
      position: absolute;
      top: -60px;
      right: -60px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(239, 68, 68, .1), transparent 70%);
      pointer-events: none
    }

    .fit2-icon-wrap {
      width: 68px;
      height: 68px;
      border-radius: 20px;
      border: 2px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px
    }

    .fit2-card h4 {
      font-family: var(--fd);
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 4px
    }

    .fit2-items {
      display: flex;
      flex-direction: column;
      gap: 18px
    }

    .fit2-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 14.5px;
      line-height: 1.55
    }

    .fit2-bullet {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      margin-top: 1px
    }

    /* COMPARISON TABLE */
    .comp-table {
      overflow-x: auto;
      border-radius: var(--rl);
      border: 1px solid var(--g200);
      background: var(--white)
    }

    .comp-table table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px
    }

    .comp-table th {
      padding: 16px 20px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--g600);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 2px solid var(--g200);
      background: var(--g50)
    }

    .comp-table th.comp-highlight {
      background: var(--orange-light);
      color: var(--orange-dark);
      border-bottom-color: var(--orange)
    }

    .comp-table td {
      padding: 14px 20px;
      text-align: center;
      border-bottom: 1px solid var(--g100);
      color: var(--g600)
    }

    .comp-table td.comp-feature {
      text-align: left;
      font-weight: 700;
      color: var(--navy);
      background: var(--g50)
    }

    .comp-table td.comp-highlight {
      background: rgba(255, 153, 0, .03);
      color: var(--navy);
      font-weight: 600
    }

    .comp-table tbody tr:hover td {
      background: rgba(255, 153, 0, .02)
    }

    .comp-table tbody tr:hover td.comp-highlight {
      background: rgba(255, 153, 0, .06)
    }

    .comp-table tbody tr:last-child td {
      border-bottom: none
    }

    /* PRICING TIER LABEL */
    .prc-tier {
      text-align: center;
      margin-bottom: 32px;
      font-size: 15px;
      color: rgba(255, 255, 255, .4);
      font-weight: 500;
      position: relative;
      z-index: 1
    }

    .prc-tier span {
      font-family: var(--fd);
      font-size: 18px;
      font-weight: 700;
      color: var(--orange)
    }

    /* RESPONSIVE */
    @media(max-width:1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .hero-l {
        text-align: center
      }

      .hero-desc {
        margin: 0 auto 16px
      }

      .hero-ctas,
      .hero-sp,
      .hero-plat {
        justify-content: center
      }

      .prc-g {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto
      }

      .pc.feat {
        transform: none
      }

      .pc.feat:hover {
        transform: translateY(-10px)
      }

      .steps-line {
        display: none
      }

      .pcard {
        width: 200px
      }

      .port-marquee::before,
      .port-marquee::after {
        width: 40px
      }
    }

    @media(max-width:768px) {
      .sp {
        padding: 64px 0
      }

      .testi-g {
        grid-template-columns: 1fr
      }

      .steps {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .tb-in {
        gap: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0 16px;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none
      }

      .tb-in::-webkit-scrollbar {
        display: none
      }

      .tb-desktop {
        display: none
      }

      .tb-mobile {
        display: block
      }

      .nav-ph {
        display: none
      }

      .nav-in {
        justify-content: center;
      }

      .nav-links {
        display: none
      }

      .nav-acts {
        display: none
      }

      .nav-btn {
        display: none
      }

      .hero {
        padding-top: 190px
      }

      .hf {
        margin: 0 -4px
      }

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

      .foot-top {
        flex-direction: column;
        text-align: center
      }

      .smcta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9997;
        background: linear-gradient(135deg, #E68A00 0%, var(--orange) 40%, #FFB347 100%);
        justify-content: center;
        align-items: center;
        padding: 0;
        box-shadow: 0 4px 16px rgba(255, 153, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .15)
      }

      body {
        padding-bottom: 0
      }

      .mob-nav-call {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 10px 20px;
        border-radius: 50px;
        background: linear-gradient(135deg, var(--orange), #FFB347);
        color: var(--white);
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .3px;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(255, 153, 0, .35);
        margin-left: auto;
        flex-shrink: 0
      }

      .mob-nav-call svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0
      }

      .hero-grid {
        text-align: center
      }

      .hero-ctas {
        justify-content: center
      }

      .hero-sp {
        justify-content: center;
        flex-wrap: wrap
      }

      .hero-plat {
        justify-content: center
      }

      .hero-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto
      }

      .fcta-btns {
        flex-direction: column;
        align-items: center
      }

      .fcta-btns .btn {
        width: 100%;
        justify-content: center
      }

      .fcta-trust {
        flex-direction: column;
        align-items: center;
        gap: 12px
      }

      .prc-badge {
        font-size: 12px;
        padding: 8px 16px;
        text-align: center
      }

      .prc-g {
        max-width: 100% !important
      }

      .pc {
        padding: 28px 20px
      }

      .modal-body .fg {
        grid-template-columns: 1fr
      }

      .fit2-card {
        padding: 24px 18px
      }

      .fit2-item {
        font-size: 13px
      }

      .foot-contact {
        flex-direction: column;
        align-items: center;
        gap: 12px
      }

      .foot-links {
        justify-content: center
      }

      .case-body h4 {
        font-size: 15px
      }

      .case-body p {
        font-size: 13px
      }

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

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

      .case-results {
        grid-template-columns: 1fr
      }

      .case-stat {
        border-right: none;
        border-bottom: 1px solid var(--g200)
      }

      .case-stat:last-child {
        border-bottom: none
      }

      .pcard {
        width: 170px
      }

      .port-marquee::before,
      .port-marquee::after {
        width: 24px
      }

      .port-track {
        gap: 14px;
        animation-duration: 35s
      }

      .comp-table {
        font-size: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
      }

      .comp-table th,
      .comp-table td {
        padding: 10px 12px
      }

      .con [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important
      }

      .con [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important
      }

      .dh-grid {
        grid-template-columns: 1fr !important
      }
    }

    /* MOBILE NAV CALL BUTTON */
    .mob-nav-call {
      display: none
    }

    /* POPUP MODAL */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: rgba(10, 22, 40, .85);
      backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .modal-overlay.active {
      display: flex
    }

    .modal-box {
      background: var(--white);
      border-radius: var(--rl);
      max-width: 480px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      animation: fadeUp .4s ease
    }

    .modal-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--orange), #FFD080, var(--orange));
      background-size: 200% 100%;
      animation: gradFlow 3s ease infinite;
      border-radius: 24px 24px 0 0
    }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--g100);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s;
      z-index: 2
    }

    .modal-close:hover {
      background: var(--g200);
      transform: rotate(90deg)
    }

    .modal-close svg {
      width: 18px;
      height: 18px;
      color: var(--g600)
    }

    .modal-header {
      padding: 28px 28px 0;
      text-align: center
    }

    .modal-header h3 {
      font-family: var(--fd);
      font-size: 21px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 4px
    }

    .modal-header .modal-plan {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange-light);
      border: 1px solid rgba(255, 153, 0, .15);
      padding: 6px 16px;
      border-radius: 60px;
      font-size: 12px;
      font-weight: 700;
      color: var(--orange-dark);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px
    }

    .modal-header p {
      color: var(--g600);
      font-size: 14px
    }

    .modal-body {
      padding: 20px 28px 28px
    }

    .modal-body .fr {
      margin-bottom: 14px
    }

    .modal-body .fg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .modal-body .fr label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--g800);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .modal-body .fr input,
    .modal-body .fr select {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--g200);
      border-radius: 12px;
      font-family: var(--fb);
      font-size: 14px;
      transition: all .3s;
      background: var(--g50);
      color: var(--g800);
      appearance: none;
      -webkit-appearance: none
    }

    .modal-body .fr select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95A5' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px
    }

    .modal-body .fr input:focus,
    .modal-body .fr select:focus {
      outline: none;
      border-color: var(--orange);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(255, 153, 0, .1)
    }

    /* PRICING CARD FLEX LAYOUT */
    .pc {
      display: flex;
      flex-direction: column
    }

    .pc-feat {
      flex: 1
    }

    .pc .btn {
      width: 100%;
      justify-content: center;
      margin-top: auto
    }