:root {
      --or: #FF6B00;
      --or2: #FF8C00;
      --orl: #FFF3E0;
      --org: rgba(255, 107, 0, .08);
      --gr: #138808;
      --gr2: #1a9e0a;
      --grl: #E8F5E9;
      --nv: #0A1628;
      --nv2: #0d2035;
      --wh: #fff;
      --bg: #F7F8FA;
      --bg2: #EDEEF0;
      --tx: #1A1A1A;
      --tx2: #5A6275;
      --tx3: #8A92A3;
      --bd: #E2E5EA;
      --sh: 0 2px 16px rgba(0, 0, 0, .07);
      --sh2: 0 8px 40px rgba(0, 0, 0, .13);
      --sh3: 0 20px 60px rgba(0, 0, 0, .18);
      --r: 12px;
      --r2: 20px;
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 16px
    }

    body {
      font-family: 'Manrope', sans-serif;
      color: var(--tx);
      background: var(--wh);
      overflow-x: hidden
    }

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

    button {
      font-family: 'Manrope', sans-serif;
      cursor: pointer
    }

    img {
      display: block
    }

    ::-webkit-scrollbar {
      width: 5px
    }

    ::-webkit-scrollbar-track {
      background: #f0f0f0
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--or), var(--gr));
      border-radius: 3px
    }

    /* ── FLAG STRIPE ── */
    .flag {
      height: 4px;
      background: linear-gradient(90deg, var(--or) 33.33%, #fff 33.33%, #fff 66.66%, var(--gr) 66.66%)
    }

    /* ── TOPBAR ── */
    .topbar {
      background: var(--nv);
      padding: 6px 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .tb-left {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap
    }

    .tb-link {
      color: rgba(255, 255, 255, .7);
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: color .2s;
      font-weight: 500
    }

    .tb-link:hover {
      color: var(--or2)
    }

    .tb-link i {
      font-size: 11px;
      color: var(--or)
    }

    .tb-right {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .tb-soc {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .55);
      font-size: 12px;
      transition: all .2s
    }

    .tb-soc:hover {
      background: var(--or);
      border-color: var(--or);
      color: #fff
    }

    .tb-wa {
      background: rgba(37, 211, 102, .15);
      border-color: rgba(37, 211, 102, .3);
      color: #25D366
    }

    .tb-wa:hover {
      background: #25D366;
      border-color: #25D366;
      color: #fff
    }

    /* ── NAVBAR ── */
    .navbar {
      background: #fff;
      position: sticky;
      top: 0;
      z-index: 999;
      border-bottom: 1px solid var(--bd);
      transition: box-shadow .3s
    }

    .navbar.scrolled {
      box-shadow: 0 4px 24px rgba(0, 0, 0, .1)
    }

    .navbar.scrolled .nav-dd {
      top: 72px
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 66px;
      padding: 0 5%
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .brand-logo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--or);
      flex-shrink: 0;
      display: block
    }

    .brand-name {
      font-family: 'Oswald', sans-serif;
      font-size: 19px;
      font-weight: 700;
      color: var(--gr);
      letter-spacing: .03em;
      line-height: 1
    }

    .brand-tag {
      font-size: 10px;
      color: var(--or);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      display: block;
      margin-top: 2px
    }

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

    .nav-item {
      position: relative
    }

    .nav-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 14px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--tx2);
      border-radius: 8px;
      transition: all .2s;
      border: none;
      background: none;
      white-space: nowrap
    }

    .nav-btn:hover,
    .nav-btn.on {
      color: var(--gr);
      background: var(--grl)
    }

    .nav-btn i {
      font-size: 8px;
      transition: transform .25s;
      color: var(--tx3)
    }

    .nav-item:hover .nav-btn i {
      transform: rotate(180deg)
    }

    /* MEGA DROPDOWN */
    .nav-dd {
      position: fixed;
      top: 72px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: var(--r2);
      box-shadow: var(--sh3);
      width: 860px;
      max-width: 96vw;
      padding: 24px;
      display: none;
      z-index: 9000;
      opacity: 0;
      transition: opacity .2s;
      flex-direction: row;
      gap: 0
    }

    .nav-item:hover .nav-dd {
      display: flex;
      opacity: 1;
      animation: ddFade .2s ease
    }

    @keyframes ddFade {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0)
      }
    }

    .dd-col {
      flex: 1;
      min-width: 160px;
      padding-right: 16px;
      border-right: 1px solid var(--bg2);
      margin-right: 16px
    }

    .dd-col:last-of-type {
      border-right: none;
      margin-right: 0;
      padding-right: 0
    }

    .dd-col-title {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--or);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--bg2)
    }

    .dd-link {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      font-size: 12.5px;
      color: var(--tx2);
      border-radius: 8px;
      transition: all .18s;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .dd-link:hover {
      background: var(--orl);
      color: var(--or);
      padding-left: 14px
    }

    .dd-link i {
      font-size: 11px;
      color: var(--tx3);
      width: 14px;
      text-align: center
    }

    .dd-link:hover i {
      color: var(--or)
    }

    .dd-promo {
      background: linear-gradient(135deg, var(--nv), #0d2a12);
      border-radius: var(--r);
      padding: 18px;
      color: #fff;
      width: 190px;
      flex-shrink: 0
    }

    .dd-promo h4 {
      font-family: 'Oswald', sans-serif;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px
    }

    .dd-promo p {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.6;
      margin-bottom: 14px
    }

    .dd-promo a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--or);
      color: #fff;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      transition: all .2s
    }

    .dd-promo a:hover {
      background: var(--or2)
    }

    /* Small dropdown */
    .nav-dd-sm {
      position: absolute;
      top: calc(100%+8px);
      left: 0;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: var(--r);
      box-shadow: var(--sh2);
      min-width: 200px;
      padding: 8px;
      display: none;
      z-index: 500
    }

    .nav-item:hover .nav-dd-sm {
      display: block;
      animation: ddFade .2s ease
    }

    .nav-cta {
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      padding: 10px 22px;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 700;
      border: none;
      transition: all .2s;
      white-space: nowrap
    }

    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(255, 107, 0, .35)
    }

    /* ── HERO (SPLIT LAYOUT) ── */
    .hero {
      background: linear-gradient(135deg, var(--nv) 0%, #0d2a14 55%, #1a1a08 100%);
      min-height: 620px;
      display: grid;
      grid-template-columns: 1fr 460px;
      align-items: center;
      padding: 60px 5%;
      gap: 60px;
      position: relative;
      overflow: hidden
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 20% 50%, rgba(255, 107, 0, .12) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(19, 136, 8, .1) 0%, transparent 50%);
      pointer-events: none
    }

    .hero-grid-pattern {
      position: absolute;
      inset: 0;
      opacity: .04;
      background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none
    }

    .hero-left {
      position: relative;
      z-index: 2
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 107, 0, .15);
      border: 1px solid rgba(255, 107, 0, .35);
      color: #FFB84D;
      padding: 5px 14px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 20px
    }

    .hero-eyebrow span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--or);
      display: block;
      animation: pulse 2s infinite
    }

    @keyframes pulse {

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

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

    .hero h1 {
      font-family: 'Oswald', sans-serif;
      font-size: clamp(34px, 4.5vw, 60px);
      font-weight: 700;
      color: #fff;
      line-height: 1.08;
      margin-bottom: 18px;
      letter-spacing: .01em
    }

    .hero h1 .hl {
      color: var(--or2);
      position: relative;
      display: inline-block
    }

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

    .hero-desc {
      font-size: 15.5px;
      color: rgba(255, 255, 255, .72);
      line-height: 1.78;
      margin-bottom: 32px;
      max-width: 520px;
      font-weight: 400
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 44px
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 26px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14.5px;
      font-weight: 700;
      transition: all .25s
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255, 107, 0, .4)
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 26px;
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .4);
      border-radius: 10px;
      font-size: 14.5px;
      font-weight: 600;
      transition: all .25s
    }

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

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap
    }

    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 7px;
      color: rgba(255, 255, 255, .55);
      font-size: 12.5px;
      font-weight: 500
    }

    .hero-trust-item i {
      color: var(--gr);
      font-size: 14px
    }

    .hero-trust-sep {
      width: 1px;
      height: 16px;
      background: rgba(255, 255, 255, .2)
    }

    /* HERO FORM */
    .hero-form-wrap {
      position: relative;
      z-index: 2
    }

    .hero-form {
      background: #fff;
      border-radius: var(--r2);
      padding: 30px;
      box-shadow: var(--sh3);
      position: relative;
      overflow: hidden
    }

    .hero-form::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--or), #fff 50%, var(--gr))
    }

    .hf-title {
      font-family: 'Oswald', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 4px
    }

    .hf-sub {
      font-size: 12px;
      color: var(--tx3);
      margin-bottom: 20px
    }

    .hf-field {
      margin-bottom: 13px
    }

    .hf-field label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--tx2);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .05em
    }

    .hf-field input,
    .hf-field select,
    .hf-field textarea {
      width: 100%;
      padding: 10px 13px;
      border: 1.5px solid var(--bd);
      border-radius: 9px;
      font-family: 'Manrope', sans-serif;
      font-size: 13.5px;
      color: var(--tx);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      background: #fff
    }

    .hf-field input:focus,
    .hf-field select:focus,
    .hf-field textarea:focus {
      border-color: var(--or);
      box-shadow: 0 0 0 3px rgba(255, 107, 0, .08)
    }

    .hf-field textarea {
      height: 72px;
      resize: none
    }

    .hf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .hf-submit {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      transition: all .25s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 4px
    }

    .hf-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(255, 107, 0, .38)
    }

    .hf-success {
      text-align: center;
      padding: 20px 0
    }

    .hf-success .si {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--grl);
      border: 2px solid var(--gr);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: var(--gr);
      margin: 0 auto 14px
    }

    .hf-success h4 {
      font-family: 'Oswald', sans-serif;
      font-size: 20px;
      color: var(--nv);
      margin-bottom: 6px
    }

    .hf-success p {
      font-size: 13px;
      color: var(--tx3)
    }

    /* ── STATS BAR ── */
    .stats-bar {
      background: var(--nv);
      padding: 24px 5%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid rgba(255, 255, 255, .06)
    }

    .stat-item {
      text-align: center;
      padding: 0 20px;
      border-right: 1px solid rgba(255, 255, 255, .08)
    }

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

    .stat-num {
      font-family: 'Oswald', sans-serif;
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      margin-bottom: 4px
    }

    .stat-num span {
      color: var(--or2)
    }

    .stat-lbl {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .5);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    /* ── SECTION COMMON ── */
    section {
      padding: 80px 5%
    }

    .sec-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--orl);
      color: var(--or);
      padding: 4px 14px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      border: 1px solid rgba(255, 107, 0, .2);
      margin-bottom: 12px
    }

    .sec-tag.green {
      background: var(--grl);
      color: var(--gr);
      border-color: rgba(19, 136, 8, .2)
    }

    .sec-title {
      font-family: 'Oswald', sans-serif;
      font-size: clamp(26px, 3.2vw, 40px);
      font-weight: 700;
      color: var(--nv);
      line-height: 1.15;
      letter-spacing: .01em
    }

    .sec-sub {
      font-size: 15px;
      color: var(--tx2);
      line-height: 1.75;
      max-width: 560px;
      margin-top: 10px
    }

    .sec-hd {
      margin-bottom: 48px
    }

    .accent-line {
      width: 48px;
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--or), var(--gr));
      margin-top: 14px
    }

    .india-bar {
      height: 5px;
      background: linear-gradient(90deg, var(--or) 33.33%, #fff 33.33%, #fff 66.66%, var(--gr) 66.66%)
    }

    /* ── CATEGORY SELECTOR ── */
    .cat-sec {
      background: var(--bg);
      padding: 60px 5%
    }

    .cat-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
      margin-top: 40px
    }

    .cat-card {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: var(--r2);
      padding: 28px 12px;
      text-align: center;
      cursor: pointer;
      transition: all .25s;
      position: relative;
      overflow: hidden
    }

    .cat-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--orl), var(--grl));
      opacity: 0;
      transition: opacity .25s
    }

    .cat-card:hover,
    .cat-card.active {
      border-color: var(--or);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(255, 107, 0, .15)
    }

    .cat-card:hover::before,
    .cat-card.active::before {
      opacity: 1
    }

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

    .cat-ico {
      font-size: 40px;
      margin-bottom: 12px;
      display: block;
      transition: transform .25s
    }

    .cat-card:hover .cat-ico {
      transform: scale(1.15) rotate(-5deg)
    }

    .cat-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--nv);
      transition: color .2s;
      line-height: 1.25;
      word-break: keep-all
    }

    .cat-card:hover .cat-name,
    .cat-card.active .cat-name {
      color: var(--or)
    }

    .cat-count {
      font-size: 12px;
      color: var(--tx3);
      margin-top: 5px;
      font-weight: 600
    }

    .cat-card.active {
      background: var(--orl)
    }

    /* ── PRODUCTS GRID ── */
    .prod-sec {
      background: #fff
    }

    .prod-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 16px
    }

    .prod-active-cat {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 700;
      color: var(--nv)
    }

    .prod-active-cat span {
      background: var(--orl);
      color: var(--or);
      padding: 3px 12px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 700
    }

    .prod-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 18px
    }

    .pc {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: var(--r2);
      overflow: hidden;
      transition: all .28s;
      cursor: pointer
    }

    .pc:hover {
      transform: translateY(-5px);
      box-shadow: var(--sh2);
      border-color: var(--or)
    }

    .pc-img {
      height: 170px;
      background: var(--bg);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .pc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease
    }

    .pc:hover .pc-img img {
      transform: scale(1.06)
    }

    .pc-img-ico {
      font-size: 50px
    }

    .pc-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: var(--or);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 6px
    }

    .pc-body {
      padding: 16px
    }

    .pc-cat-tag {
      font-size: 10.5px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 5px;
      margin-bottom: 8px;
      display: inline-block
    }

    .pc-cat-tag.labeling {
      background: var(--orl);
      color: var(--or)
    }

    .pc-cat-tag.conveyor {
      background: var(--grl);
      color: var(--gr)
    }

    .pc-cat-tag.conveyor_sys {
      background: #E0F7FA;
      color: #006064
    }

    .pc-cat-tag.sensors {
      background: #E3F2FD;
      color: #1565C0
    }

    .pc-cat-tag.automation {
      background: #F3E5F5;
      color: #7B1FA2
    }

    .pc-cat-tag.printing {
      background: #FCE4EC;
      color: #C62828
    }

    .pc-name {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 5px;
      line-height: 1.3
    }

    .pc-desc {
      font-size: 12.5px;
      color: var(--tx2);
      line-height: 1.55;
      margin-bottom: 14px
    }

    .pc-inq {
      width: 100%;
      padding: 9px;
      background: var(--bg);
      color: var(--or);
      border: 1.5px solid rgba(255, 107, 0, .25);
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 700;
      transition: all .22s
    }

    .pc:hover .pc-inq {
      background: var(--or);
      color: #fff;
      border-color: var(--or)
    }

    /* ── WHY US ── */
    .why-sec {
      background: var(--bg)
    }

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

    .why-visual {
      background: linear-gradient(135deg, var(--nv) 0%, #0d3520 100%);
      border-radius: var(--r2);
      padding: 40px;
      position: relative;
      overflow: hidden;
      min-height: 440px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .why-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 80% 20%, rgba(255, 107, 0, .15), transparent 50%), radial-gradient(circle at 20% 80%, rgba(19, 136, 8, .12), transparent 50%);
      pointer-events: none
    }

    .why-visual-title {
      position: relative;
      z-index: 1
    }

    .why-visual-title h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 10px
    }

    .why-visual-title p {
      font-size: 13.5px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.7
    }

    .why-badges {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      position: relative;
      z-index: 1;
      margin-top: 28px
    }

    .why-badge {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--r);
      padding: 16px
    }

    .why-badge-num {
      font-family: 'Oswald', sans-serif;
      font-size: 30px;
      font-weight: 700;
      color: var(--or2);
      line-height: 1
    }

    .why-badge-lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
      font-weight: 600;
      margin-top: 3px;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .why-feats {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 32px
    }

    .wf {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 18px;
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: var(--r);
      transition: all .25s;
      border-left: 3px solid transparent
    }

    .wf:hover {
      border-color: var(--or);
      border-left-color: var(--or);
      transform: translateX(5px);
      box-shadow: var(--sh)
    }

    .wf-ico {
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px
    }

    .wf-ico.o {
      background: linear-gradient(135deg, var(--or), var(--or2))
    }

    .wf-ico.g {
      background: linear-gradient(135deg, var(--gr), var(--gr2))
    }

    .wf h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 4px
    }

    .wf p {
      font-size: 12.5px;
      color: var(--tx2);
      line-height: 1.6
    }

    /* ── PROCESS ── */
    .process-sec {
      background: linear-gradient(135deg, var(--nv) 0%, #0b2d13 100%);
      color: #fff
    }

    .process-sec .sec-title {
      color: #fff
    }

    .process-sec .sec-sub {
      color: rgba(255, 255, 255, .6)
    }

    .process-sec .sec-tag {
      background: rgba(255, 107, 0, .18);
      color: #FFB84D;
      border-color: rgba(255, 107, 0, .3)
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 52px;
      position: relative
    }

    .process-grid::after {
      content: '';
      position: absolute;
      top: 36px;
      left: 12%;
      right: 12%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15) 20%, rgba(255, 255, 255, .15) 80%, transparent);
      pointer-events: none
    }

    .ps {
      text-align: center;
      padding: 0 20px;
      position: relative;
      z-index: 1
    }

    .ps-ico {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
      border: 1.5px solid rgba(255, 255, 255, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 28px;
      transition: all .3s;
      position: relative
    }

    .ps-num {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--or);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ps:hover .ps-ico {
      background: var(--or);
      border-color: var(--or);
      transform: scale(1.1)
    }

    .ps h4 {
      font-family: 'Oswald', sans-serif;
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: .01em
    }

    .ps p {
      font-size: 13px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.7
    }

    /* ── INDUSTRIES WE SERVE ── */
    .ind-sec {
      background: var(--bg)
    }

    .ind-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 14px;
      margin-top: 40px
    }

    .ind-card {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: var(--r2);
      padding: 22px 16px;
      text-align: center;
      transition: all .25s;
      cursor: default
    }

    .ind-card:hover {
      border-color: var(--gr);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(19, 136, 8, .1)
    }

    .ind-ico {
      font-size: 34px;
      margin-bottom: 10px;
      display: block
    }

    .ind-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--nv)
    }

    .ind-card:hover .ind-name {
      color: var(--gr)
    }

    /* ── CLIENTS MARQUEE ── */
    .cli-sec {
      background: #fff;
      overflow: hidden
    }

    .cli-track-wrap {
      overflow: hidden;
      margin-top: 40px;
      position: relative
    }

    .cli-track-wrap::before,
    .cli-track-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none
    }

    .cli-track-wrap::before {
      left: 0;
      background: linear-gradient(90deg, #fff, transparent)
    }

    .cli-track-wrap::after {
      right: 0;
      background: linear-gradient(-90deg, #fff, transparent)
    }

    .cli-track {
      display: flex;
      gap: 16px;
      animation: marquee 30s linear infinite;
      width: max-content
    }

    .cli-track:hover {
      animation-play-state: paused
    }

    .cli-card {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: var(--r);
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 140px;
      transition: all .22s;
      flex-shrink: 0
    }

    .cli-card:hover {
      border-color: var(--or);
      box-shadow: var(--sh);
      transform: translateY(-2px)
    }

    .cli-card img {
      width: 80px;
      height: 40px;
      object-fit: contain
    }

    .cli-card-name {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--tx2);
      text-align: center;
      line-height: 1.3
    }

    .cli-ico-only {
      font-size: 22px
    }

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

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

    /* ── INQUIRY ── */
    .inq-sec {
      background: var(--bg)
    }

    .inq-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 60px;
      align-items: start
    }

    .inq-left h2 {
      font-family: 'Oswald', sans-serif;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 12px;
      line-height: 1.15
    }

    .inq-left h2 em {
      font-style: normal;
      color: var(--or)
    }

    .inq-left>p {
      font-size: 15px;
      color: var(--tx2);
      line-height: 1.75;
      margin-bottom: 28px
    }

    .contact-cards {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .cc {
      display: flex;
      gap: 14px;
      align-items: center;
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: var(--r);
      padding: 16px;
      transition: all .2s
    }

    .cc:hover {
      border-color: var(--or);
      box-shadow: var(--sh)
    }

    .cc-ico {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px
    }

    .cc-ico.o {
      background: linear-gradient(135deg, var(--or), var(--or2))
    }

    .cc-ico.g {
      background: linear-gradient(135deg, var(--gr), var(--gr2))
    }

    .cc strong {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 2px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .cc span,
    .cc a {
      font-size: 13px;
      color: var(--tx2);
      font-weight: 500
    }

    .cc a:hover {
      color: var(--or)
    }

    /* INQ FORM */
    .inq-form-box {
      background: #fff;
      border-radius: var(--r2);
      padding: 36px;
      box-shadow: var(--sh2);
      border: 1.5px solid var(--bd);
      position: relative;
      overflow: hidden
    }

    .inq-form-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--or), #fff 50%, var(--gr))
    }

    .inq-form-box h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 4px
    }

    .inq-form-box>p {
      font-size: 13px;
      color: var(--tx3);
      margin-bottom: 22px
    }

    .fg {
      margin-bottom: 14px
    }

    .fg label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--tx2);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .fg input,
    .fg select,
    .fg textarea {
      width: 100%;
      padding: 11px 13px;
      border: 1.5px solid var(--bd);
      border-radius: 9px;
      font-family: 'Manrope', sans-serif;
      font-size: 13.5px;
      color: var(--tx);
      outline: none;
      transition: all .2s;
      background: #fff;
      appearance: none
    }

    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      border-color: var(--or);
      box-shadow: 0 0 0 3px rgba(255, 107, 0, .08)
    }

    .fg textarea {
      resize: none;
      height: 88px
    }

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

    .sub-btn {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14.5px;
      font-weight: 700;
      transition: all .25s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 4px
    }

    .sub-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(255, 107, 0, .38)
    }

    /* ── PRODUCT MODAL ── */
    .modal-ov {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(5px);
      align-items: center;
      justify-content: center;
      padding: 16px
    }

    .modal-ov.open {
      display: flex
    }

    .modal {
      background: #fff;
      border-radius: 22px;
      width: 100%;
      max-width: 620px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      animation: modalIn .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: scale(.88) translateY(20px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .modal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--or), #fff 50%, var(--gr));
      border-radius: 22px 22px 0 0
    }

    .modal-img {
      width: 100%;
      height: 230px;
      object-fit: cover
    }

    .modal-img-ph {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 70px;
      background: linear-gradient(135deg, var(--orl), var(--grl))
    }

    .modal-body {
      padding: 26px
    }

    .modal-cat {
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      display: inline-block
    }

    .modal-body h2 {
      font-family: 'Oswald', sans-serif;
      font-size: 26px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 8px
    }

    .modal-desc {
      font-size: 14px;
      color: var(--tx2);
      line-height: 1.7;
      margin-bottom: 20px
    }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .9);
      border: none;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      transition: all .2s;
      z-index: 2
    }

    .modal-close:hover {
      background: #ffe0e0;
      color: #e53935
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--bd)
    }

    .modal-inq {
      flex: 1;
      padding: 12px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      transition: all .25s
    }

    .modal-inq:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(255, 107, 0, .35)
    }

    .modal-cancel {
      padding: 12px 20px;
      background: var(--bg);
      color: var(--tx2);
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 600;
      transition: all .2s
    }

    .modal-cancel:hover {
      background: var(--bg2)
    }

    /* ── POPUP ── */
    .popup-ov {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .popup-ov.open {
      display: flex
    }

    .popup {
      background: #fff;
      border-radius: 22px;
      width: 100%;
      max-width: 460px;
      padding: 36px;
      position: relative;
      max-height: 92vh;
      overflow-y: auto;
      animation: modalIn .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .popup::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--or), #fff 50%, var(--gr));
      border-radius: 22px 22px 0 0
    }

    .popup-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg);
      border: none;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      transition: all .2s
    }

    .popup-close:hover {
      background: #ffe0e0;
      color: #e53935
    }

    .popup h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 4px
    }

    .popup-sub {
      font-size: 13px;
      color: var(--tx3);
      margin-bottom: 20px
    }

    .suc {
      text-align: center;
      padding: 24px 0
    }

    .suc-ico {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: var(--grl);
      border: 2px solid var(--gr);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: var(--gr);
      margin: 0 auto 16px
    }

    .suc h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 22px;
      color: var(--nv);
      margin-bottom: 6px
    }

    .suc p {
      font-size: 13.5px;
      color: var(--tx3)
    }

    /* ── TOAST ── */
    .toast-wrap {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      pointer-events: none
    }

    .toast {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: 12px;
      padding: 12px 20px;
      font-size: 13.5px;
      font-weight: 600;
      box-shadow: var(--sh2);
      display: flex;
      align-items: center;
      gap: 10px;
      animation: toastUp .3s ease;
      pointer-events: all;
      min-width: 280px;
      justify-content: center
    }

    .toast.ok {
      border-color: rgba(19, 136, 8, .4);
      color: var(--gr)
    }

    .toast.err {
      border-color: rgba(255, 107, 0, .35);
      color: var(--or)
    }

    @keyframes toastUp {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

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

    /* ── FOOTER ── */
    footer {
      background: var(--nv);
      color: rgba(255, 255, 255, .8);
      padding: 60px 5% 0
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.3fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .footer-brand h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .02em
    }

    .footer-brand small {
      display: block;
      font-size: 10px;
      color: var(--or);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 14px
    }

    .footer-brand p {
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      line-height: 1.8;
      margin-bottom: 18px
    }

    .footer-soc {
      display: flex;
      gap: 8px
    }

    .fsoc {
      width: 35px;
      height: 35px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .55);
      font-size: 13px;
      transition: all .2s
    }

    .fsoc:hover {
      background: var(--or);
      border-color: var(--or);
      color: #fff;
      transform: translateY(-2px)
    }

    .footer-col h4 {
      font-family: 'Oswald', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      letter-spacing: .04em
    }

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

    .footer-col ul li a {
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color .2s
    }

    .footer-col ul li a::before {
      content: '›';
      color: var(--or)
    }

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

    .fci {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      align-items: flex-start
    }

    .fci i {
      color: var(--or);
      margin-top: 3px;
      font-size: 12px;
      flex-shrink: 0;
      width: 14px
    }

    .fci span,
    .fci a {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .45);
      line-height: 1.6
    }

    .fci a:hover {
      color: var(--or)
    }

    .footer-bottom {
      padding: 18px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px
    }

    .footer-bottom p {
      font-size: 12px;
      color: rgba(255, 255, 255, .28)
    }

    .footer-bottom a {
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      transition: color .2s
    }

    .footer-bottom a:hover {
      color: var(--or)
    }

    /* ── FLOATS ── */
    .floats {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 997;
      display: flex;
      flex-direction: column;
      gap: 9px;
      align-items: flex-end
    }

    .flt-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: 99px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      border: none;
      transition: all .25s;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .2)
    }

    .flt-btn.wa {
      background: #25D366;
      animation: waRing 2.5s ease-in-out infinite
    }

    @keyframes waRing {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5)
      }

      70% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0)
      }
    }

    .flt-btn.qi {
      background: linear-gradient(135deg, var(--or), var(--or2))
    }

    .flt-btn:hover {
      transform: scale(1.06)
    }

    /* ── PROGRESS BAR ── */
    #pg-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--or), var(--gr));
      z-index: 10000;
      width: 0%;
      pointer-events: none;
      transition: width .1s
    }

    /* ── SCROLL REVEAL ── */
    .sr {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
    }

    .sr.sl {
      transform: translateX(-40px)
    }

    .sr.sr2 {
      transform: translateX(40px)
    }

    .sr.sc {
      transform: scale(.92)
    }

    .sr.vis {
      opacity: 1;
      transform: none
    }

    .stagger-in>* {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .5s, transform .5s cubic-bezier(.22, 1, .36, 1)
    }

    .stagger-in.vis>*:nth-child(1) {
      opacity: 1;
      transform: none;
      transition-delay: .05s
    }

    .stagger-in.vis>*:nth-child(2) {
      opacity: 1;
      transform: none;
      transition-delay: .12s
    }

    .stagger-in.vis>*:nth-child(3) {
      opacity: 1;
      transform: none;
      transition-delay: .19s
    }

    .stagger-in.vis>*:nth-child(4) {
      opacity: 1;
      transform: none;
      transition-delay: .26s
    }

    .stagger-in.vis>*:nth-child(5) {
      opacity: 1;
      transform: none;
      transition-delay: .33s
    }

    .stagger-in.vis>*:nth-child(6) {
      opacity: 1;
      transform: none;
      transition-delay: .40s
    }

    .stagger-in.vis>*:nth-child(n+7) {
      opacity: 1;
      transform: none;
      transition-delay: .47s
    }

    /* ── RESPONSIVE ── */
    @keyframes prodReveal {
      from {
        opacity: 0;
        transform: translateY(24px)
      }

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

    /* ── HAMBURGER ── */
    .ham-btn {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: background .2s
    }

    .ham-btn:hover {
      background: var(--bg)
    }

    .ham-btn span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: var(--tx);
      border-radius: 2px;
      transition: all .35s cubic-bezier(.68, -0.55, .27, 1.55)
    }

    .ham-btn.open span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg)
    }

    .ham-btn.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0)
    }

    .ham-btn.open span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg)
    }

    /* ── MOBILE NAV DRAWER ── */
    .mob-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 8000;
      pointer-events: none
    }

    .mob-nav-bg {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      opacity: 0;
      transition: opacity .3s;
      backdrop-filter: blur(3px)
    }

    .mob-nav-drawer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 300px;
      max-width: 88vw;
      background: #fff;
      box-shadow: -8px 0 40px rgba(0, 0, 0, .18);
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.22, 1, .36, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column
    }

    .mob-nav.open {
      pointer-events: all
    }

    .mob-nav.open .mob-nav-bg {
      opacity: 1
    }

    .mob-nav.open .mob-nav-drawer {
      transform: translateX(0)
    }

    .mob-nav-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px;
      border-bottom: 1px solid var(--bd)
    }

    .mob-nav-head img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid var(--or)
    }

    .mob-nav-head strong {
      font-family: 'Oswald', sans-serif;
      font-size: 18px;
      color: var(--gr)
    }

    .mob-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--tx2);
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      transition: all .2s
    }

    .mob-close:hover {
      background: var(--bg2);
      color: var(--tx)
    }

    .mob-nav-links {
      padding: 12px 0;
      flex: 1
    }

    .mob-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 22px;
      font-size: 15px;
      font-weight: 600;
      color: var(--tx);
      border: none;
      background: none;
      width: 100%;
      cursor: pointer;
      text-align: left;
      transition: background .15s;
      font-family: 'Manrope', sans-serif
    }

    .mob-link:hover {
      background: var(--bg);
      color: var(--or)
    }

    .mob-link i {
      font-size: 10px;
      color: var(--tx3)
    }

    .mob-sub {
      background: var(--bg);
      overflow: hidden;
      max-height: 0;
      transition: max-height .35s cubic-bezier(.22, 1, .36, 1)
    }

    .mob-sub.open {
      max-height: 400px
    }

    .mob-sub-link {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px 10px 36px;
      font-size: 13px;
      color: var(--tx2);
      background: none;
      border: none;
      width: 100%;
      cursor: pointer;
      text-align: left;
      transition: all .15s;
      font-family: 'Manrope', sans-serif;
      font-weight: 500
    }

    .mob-sub-link:hover {
      color: var(--or);
      padding-left: 42px
    }

    .mob-nav-cta {
      padding: 16px 20px;
      border-top: 1px solid var(--bd)
    }

    .mob-cta-btn {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, var(--or), var(--or2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Manrope', sans-serif;
      transition: all .2s
    }

    .mob-cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(255, 107, 0, .38)
    }

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

      .hero-form-wrap {
        display: none
      }

      .nav-links,
      .nav-cta {
        display: none
      }

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

      .ham-btn {
        display: flex
      }
    }

    @media(max-width:900px) {
      .cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
      }

      .prod-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:768px) {

      .why-grid,
      .inq-grid {
        grid-template-columns: 1fr
      }

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

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

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

      .hero {
        padding: 40px 5%
      }

      .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
      }

      .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
      }

      .cat-card {
        padding: 16px 10px
      }

      .cat-ico {
        font-size: 28px
      }

      .cat-name {
        font-size: 12px
      }

      .pc-img {
        height: 140px
      }

      .prod-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
      }

      section {
        padding: 50px 4%
      }

      .cat-sec {
        padding: 50px 4%
      }
    }

    @media(max-width:480px) {
      .tb-left {
        display: none
      }

      .flt-btn span {
        display: none
      }

      .flt-btn {
        padding: 13px
      }

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

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

      .cat-grid {
        grid-template-columns: repeat(2, 1fr)
      }

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

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

      .ind-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }