:root {
    --navy: #102746;
    --ink: #17243a;
    --blue: #6577ff;
    --muted: #718096;
    --line: #e5eaf1;
    --green: #18b86b;
    --green2: #4f61ea;
    --mint: #dff8ed;
    --soft: #f5f7fb;
    --shadow: 0 18px 55px rgba(16, 39, 70, .11);
    --radius: 24px;
}

 

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     font-family: Inter, system-ui, sans-serif;
     color: var(--ink);
     overflow-x: hidden
 }

 a {
     text-decoration: none
 }

 .site-nav {
     padding: 18px 0;
     transition: .35s;
     background: transparent
 }

 .site-nav.scrolled {
     background: rgba(7, 26, 51, .94);
     backdrop-filter: blur(18px);
     padding: 11px 0;
     box-shadow: 0 10px 35px rgba(0, 0, 0, .12)
 }

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 5000;
  display: grid;
  place-items: center;
  transition: .5s ease
}

.page-loader.hide {
  opacity: 0;
  visibility: hidden
}

.loader-brand {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px
}

.loader-brand span span {
  color: #20d97e
}

.loader-brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aab7cb;
  margin-top: 2px
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--blue), #8a96ff);
  display: grid;
  place-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff !important
}

.site-nav.scrolled .brand {
  color: #fff !important
}

.brand-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1.3px;
  position: relative
}

.brand-yatra {
  color: #1264e8
}

.brand-nest {
  color: #17bd6d
}

.brand-logo i {
  font-size: 11px;
  color: #1264e8;
  position: absolute;
  top: -4px;
  right: -12px
}

.brand-product {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .25);
 
}

 .nav-link {
     color: rgba(255, 255, 255, .78) !important;
     font-weight: 600;
     font-size: 14px;
     padding: 10px 13px !important
 }

 .nav-link:hover {
     color: #fff !important
 }

 .btn-nav {
     background: #fff;
     color: var(--navy);
     border-radius: 12px;
     padding: 11px 17px;
     font-weight: 800;
     font-size: 13px
 }

 .btn-nav:hover {
     background: var(--mint);
     color: var(--navy)
 }

 .nav-toggler {
     color: #fff;
     border: 1px solid rgba(255, 255, 255, .25);
     font-size: 24px
 }

 .product-menu {
     border: 0;
     border-radius: 18px;
     padding: 10px;
     min-width: 280px;
     box-shadow: var(--shadow)
 }

 .product-menu .dropdown-item {
     display: flex;
     gap: 12px;
     padding: 11px;
     border-radius: 12px;
     align-items: center
 }

 .product-menu .dropdown-item:hover {
     background: var(--soft)
 }

 .product-menu i {
     font-size: 20px;
     color: var(--green)
 }

 .product-menu span {
     display: flex;
     flex-direction: column
 }

 .product-menu b {
     font-size: 13px
 }

 .product-menu small {
     font-size: 11px;
     color: var(--muted);
     margin-top: 2px
 }

 .page-loader {
     position: fixed;
     inset: 0;
     background: var(--navy);
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #fff;
     transition: .6s
 }

 .page-loader.hide {
     opacity: 0;
     visibility: hidden
 }

 .loader-logo {
     font-size: 34px;
     font-weight: 900;
     letter-spacing: -2px
 }

 .loader-logo .loader-dot {
     color: var(--green)
 }

 .loader-line {
     width: 180px;
     height: 2px;
     background: rgba(255, 255, 255, .15);
     margin: 18px 0 10px;
     overflow: hidden
 }

 .loader-line span {
     display: block;
     width: 40%;
     height: 100%;
     background: var(--green);
     animation: load 1s infinite
 }

 .page-loader small {
     font-size: 9px;
     letter-spacing: 3px;
     color: #8ea1b8
 }

 @keyframes load {
     0% {
         transform: translateX(-100%)
     }

     100% {
         transform: translateX(500%)
     }
 }

 .scroll-progress {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     z-index: 10001
 }

 .scroll-progress span {
     display: block;
     height: 100%;
     width: 0;
     background: var(--green)
 }

 .hero {
     min-height: 790px;
     background: radial-gradient(circle at 75% 35%, #143d67 0, #071a33 42%, #041326 100%);
     position: relative;
     overflow: hidden;
     padding: 150px 0 100px;
     color: #fff
 }

 .hero-grid {
     position: absolute;
     inset: 0;
     opacity: .2;
     background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
     background-size: 70px 70px
 }

 .hero-orb {
     position: absolute;
     border-radius: 50%;
     opacity: .22
 }

 .orb-a {
     width: 400px;
     height: 400px;
     background: #1fbf83;
     right: -130px;
     top: 80px
 }

 .orb-b {
     width: 250px;
     height: 250px;
     background: #348dd0;
     left: -120px;
     bottom: -100px
 }

 .hero-row {
     min-height: 540px
 }

 .eyebrow,
 .section-kicker {
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 2.2px;
     color: #5fd6a6;
     display: inline-flex;
     align-items: center;
     gap: 8px
 }

 .pulse-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--green);
     box-shadow: 0 0 0 7px rgba(33, 183, 122, .13);
     animation: pulse 2s infinite
 }

 @keyframes pulse {
     50% {
         box-shadow: 0 0 0 13px rgba(33, 183, 122, 0)
     }
 }

 .hero-title {
     font-size: clamp(52px, 6vw, 86px);
     line-height: .98;
     letter-spacing: -5px;
     font-weight: 900;
     margin: 22px 0
 }

 .hero-title span,
 .section-title span,
 .light-title span {
     color: var(--green)
 }

 .hero-copy {
     max-width: 650px;
     color: #b7c6d7;
     font-size: 18px;
     line-height: 1.75
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-top: 30px
 }

 .btn-primary-custom {
     background: var(--green);
     color: #062038;
     border: 0;
     padding: 14px 20px;
     border-radius: 13px;
     font-weight: 800
 }

 .btn-primary-custom:hover {
     background: #63d7aa;
     color: #062038
 }

 .btn-ghost-custom {
     border: 1px solid rgba(255, 255, 255, .23);
     color: #fff;
     padding: 14px 20px;
     border-radius: 13px;
     font-weight: 700
 }

 .btn-ghost-custom:hover {
     background: rgba(255, 255, 255, .08);
     color: #fff
 }

 .hero-trust {
     display: flex;
     gap: 22px;
     flex-wrap: wrap;
     margin-top: 28px;
     color: #9fb1c7;
     font-size: 12px
 }

 .hero-trust i {
     color: var(--green);
     margin-right: 6px
 }

 .ecosystem-visual {
     height: 560px;
     position: relative;
     max-width: 560px;
     margin: auto
 }

 .visual-ring {
     position: absolute;
     border: 1px solid rgba(114, 224, 182, .16);
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%)
 }

 .ring-one {
     width: 350px;
     height: 350px
 }

 .ring-two {
     width: 500px;
     height: 500px;
     border-style: dashed;
     animation: spin 28s linear infinite
 }

 @keyframes spin {
     to {
         transform: translate(-50%, -50%) rotate(360deg)
     }
 }

 .core-node {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 170px;
     height: 170px;
     border-radius: 50%;
     background: rgba(10, 38, 69, .9);
     border: 1px solid rgba(105, 225, 181, .45);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 80px rgba(33, 183, 122, .2);
     z-index: 3
 }

 .core-icon {
     width: 45px;
     height: 45px;
     border-radius: 14px;
     background: var(--green);
     color: #062038;
     display: grid;
     place-items: center;
     font-size: 22px;
     margin-bottom: 10px
 }

 .core-node strong {
     font-size: 21px
 }

 .core-node small {
     font-size: 8px;
     letter-spacing: 1.8px;
     color: #7f9bb6;
     margin-top: 4px
 }

 .product-node {
     position: absolute;
     width: 142px;
     min-height: 108px;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 20px;
     color: #fff;
     padding: 16px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     z-index: 4;
     backdrop-filter: blur(12px);
     transition: .3s
 }

 .product-node:hover {
     transform: translateY(-7px);
     background: rgba(255, 255, 255, .12);
     color: #fff;
     border-color: rgba(95, 214, 166, .55)
 }

 .product-node i {
     font-size: 21px;
     color: #62d7a9;
     margin-bottom: 9px
 }

 .product-node b {
     font-size: 13px
 }

 .product-node small {
     font-size: 10px;
     color: #8ea6bd;
     margin-top: 4px
 }

 .node-pms {
     left: 0;
     top: 85px
 }

 .node-rms {
     right: 0;
     top: 85px
 }

 .node-booking {
     left: 5px;
     bottom: 78px
 }

 .node-channel {
     right: 5px;
     bottom: 78px
 }

 .connection {
     position: absolute;
     height: 1px;
     background: linear-gradient(90deg, transparent, #48c996, transparent);
     width: 155px;
     left: 50%;
     top: 50%;
     transform-origin: left center;
     z-index: 1;
     opacity: .7
 }

 .connection-1 {
     transform: rotate(-145deg)
 }

 .connection-2 {
     transform: rotate(-35deg)
 }

 .connection-3 {
     transform: rotate(145deg)
 }

 .connection-4 {
     transform: rotate(35deg)
 }

 .sync-particle {
     position: absolute;
     width: 6px;
     height: 6px;
     background: #8cf0c4;
     border-radius: 50%;
     box-shadow: 0 0 15px #42d79d;
     z-index: 2
 }

 .particle-one {
     animation: travel1 4s linear infinite
 }

 .particle-two {
     animation: travel2 5s linear infinite
 }

 .particle-three {
     animation: travel3 4.5s linear infinite
 }

 @keyframes travel1 {
     0% {
         left: 50%;
         top: 50%;
         opacity: 0
     }

     15% {
         opacity: 1
     }

     100% {
         left: 13%;
         top: 20%;
         opacity: 0
     }
 }

 @keyframes travel2 {
     0% {
         left: 50%;
         top: 50%;
         opacity: 0
     }

     15% {
         opacity: 1
     }

     100% {
         left: 84%;
         top: 20%;
         opacity: 0
     }
 }

 @keyframes travel3 {
     0% {
         left: 50%;
         top: 50%;
         opacity: 0
     }

     15% {
         opacity: 1
     }

     100% {
         left: 84%;
         top: 80%;
         opacity: 0
     }
 }

 .ecosystem-strip {
     background: #fff;
     border-bottom: 1px solid var(--line);
     box-shadow: 0 8px 30px rgba(7, 26, 51, .05);
     position: relative;
     z-index: 5
 }

 .ecosystem-strip-inner {
     min-height: 82px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 24px
 }

 .strip-label {
     font-size: 10px;
     letter-spacing: 2px;
     color: #8a98a9;
     font-weight: 800
 }

 .ecosystem-strip b {
     font-size: 14px
 }

 .ecosystem-strip i {
     color: var(--green)
 }

 .section-padding {
     padding: 115px 0
 }

 .section-heading {
     max-width: 850px;
     margin: 0 auto 55px
 }

 .section-title {
     font-size: clamp(38px, 4.5vw, 62px);
     line-height: 1.04;
     letter-spacing: -3px;
     font-weight: 850;
     margin: 17px 0
 }

 .section-intro {
     color: var(--muted);
     font-size: 16px;
     line-height: 1.75;
     max-width: 700px;
     margin: 0 auto
 }

 .section-intro.side {
     margin: 0 0 5px auto;
     max-width: 440px
 }

 .lead-copy {
     font-size: 21px;
     line-height: 1.65;
     color: #3c5067
 }

 .body-copy {
     color: var(--muted);
     line-height: 1.85
 }

 .text-link {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     color: var(--green2);
     font-weight: 800;
     margin-top: 12px
 }

 .about-panel {
     background: var(--soft);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 28px;
     box-shadow: var(--shadow)
 }

 .about-panel-top {
     display: flex;
     justify-content: space-between;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 2px;
     color: #8493a4;
     margin-bottom: 12px
 }

 .about-panel-top i {
     color: var(--green);
     font-size: 18px
 }

 .focus-row {
     display: flex;
     gap: 18px;
     padding: 21px 0;
     border-top: 1px solid var(--line)
 }

 .focus-row strong {
     color: var(--green);
     font-size: 12px
 }

 .focus-row div {
     display: flex;
     flex-direction: column;
     gap: 5px
 }

 .focus-row b {
     font-size: 16px
 }

 .focus-row span {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.5
 }

 .problem-section,
 .automation-section,
 .audience-section,
 .vision-section {
     background: var(--soft)
 }

 .problem-board {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 30px;
     padding: 35px;
     display: grid;
     grid-template-columns: 1fr 70px 1fr;
     gap: 25px;
     box-shadow: var(--shadow)
 }

 .problem-side {
     padding: 12px
 }

 .board-label {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: 1.5px;
     color: #8a98a9;
     margin-bottom: 25px
 }

 .board-label i {
     margin-right: 7px
 }

 .traditional .board-label i {
     color: #e66b6b
 }

 .solution .board-label i {
     color: var(--green)
 }

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

 .tool-cloud div {
     padding: 18px;
     border: 1px solid var(--line);
     border-radius: 15px;
     display: flex;
     align-items: center;
     gap: 10px;
     color: #64758a
 }

 .tool-cloud i {
     color: #9ba8b7
 }

 .problem-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 20px
 }

 .problem-list span {
     font-size: 11px;
     padding: 8px 10px;
     background: #fff4f4;
     color: #a06464;
     border-radius: 20px
 }

 .problem-arrow {
     display: grid;
     place-items: center;
     color: var(--green);
     font-size: 26px
 }

 .solution {
     background: linear-gradient(145deg, #f1fbf6, #fff);
     border-radius: 22px;
     padding: 25px
 }

 .solution-core {
     text-align: center;
     margin: 10px auto 20px
 }

 .solution-core div {
     width: 58px;
     height: 58px;
     border-radius: 17px;
     background: var(--navy);
     color: var(--green);
     display: grid;
     place-items: center;
     margin: auto;
     font-size: 25px
 }

 .solution-core strong {
     display: block;
     font-size: 19px;
     margin-top: 10px
 }

 .solution-core small {
     font-size: 8px;
     letter-spacing: 2px;
     color: #8795a5
 }

 .solution-products {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px
 }

 .solution-products span {
     padding: 10px 12px;
     background: #fff;
     border: 1px solid #d9eee5;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700
 }

 .solution-products i {
     color: var(--green);
     margin-right: 4px
 }

 .solution-line {
     font-size: 11px;
     color: #3d715d;
     text-align: center;
     margin-top: 22px
 }

 .solution-line i {
     color: var(--green)
 }

 .products-section {
     background: #fff
 }

 .product-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 22px
 }

 .product-card {
     min-height: 540px;
     border-radius: 30px;
     padding: 31px;
     position: relative;
     overflow: hidden;
     border: 1px solid var(--line);
     transition: .35s;
     background: #fff
 }

 .product-card:hover {
     transform: translateY(-7px);
     box-shadow: var(--shadow)
 }

 .product-card-glow {
     position: absolute;
     width: 260px;
     height: 260px;
     border-radius: 50%;
     right: -100px;
     top: -100px;
     background: rgba(33, 183, 122, .1)
 }

 .product-top {
     display: flex;
     justify-content: space-between
 }

 .product-number {
     font-size: 11px;
     font-weight: 900;
     color: #9aa7b5
 }

 .product-top>i {
     font-size: 25px;
     color: var(--green)
 }

 .product-type {
     display: block;
     font-size: 9px;
     letter-spacing: 1.7px;
     font-weight: 900;
     color: #8997a8;
     margin-top: 32px
 }

 .product-card h3 {
     font-size: 33px;
     letter-spacing: -1.8px;
     margin: 10px 0
 }

 .product-card h3 span {
     color: var(--green)
 }

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

 .product-mini-ui {
     margin: 28px 0;
     background: #f7fafc;
     border: 1px solid #e4ebf1;
     border-radius: 19px;
     padding: 17px;
     min-height: 145px
 }

 .mini-ui-head {
     display: flex;
     justify-content: space-between;
     font-size: 10px;
     color: #78899b;
     margin-bottom: 18px
 }

 .mini-ui-head b {
     color: var(--green)
 }

 .mini-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px
 }

 .mini-stats span {
     background: #fff;
     border-radius: 12px;
     padding: 13px
 }

 .mini-stats b {
     display: block;
     font-size: 19px
 }

 .mini-stats small {
     font-size: 9px;
     color: #8997a8
 }

 .table-map {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 9px
 }

 .table-map i {
     font-style: normal;
     text-align: center;
     padding: 13px 5px;
     border-radius: 10px;
     background: #e9f0f5;
     color: #68798d;
     font-size: 10px
 }

 .table-map i.occupied {
     background: #dff8ed;
     color: #17895e
 }

 .mini-search {
     display: flex;
     gap: 7px
 }

 .mini-search span,
 .mini-search b {
     background: #fff;
     border: 1px solid #e2e9ef;
     border-radius: 10px;
     padding: 11px;
     font-size: 9px
 }

 .mini-search span {
     flex: 1;
     color: #6c7e91
 }

 .mini-search b {
     color: var(--green);
     width: 38px;
     text-align: center
 }

 .room-mini {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 12px
 }

 .room-mini>div {
     width: 58px;
     height: 42px;
     border-radius: 9px;
     background: linear-gradient(135deg, #1c4564, #7aa28d)
 }

 .room-mini span {
     display: flex;
     flex-direction: column;
     flex: 1
 }

 .room-mini b {
     font-size: 10px
 }

 .room-mini small {
     font-size: 9px;
     color: #8492a1
 }

 .room-mini button {
     border: 0;
     background: var(--navy);
     color: #fff;
     border-radius: 8px;
     padding: 8px 10px;
     font-size: 9px
 }

 .sync-head {
     display: flex;
     justify-content: space-between;
     font-size: 10px;
     color: #728397;
     margin-bottom: 11px
 }

 .sync-head b {
     color: #18845e
 }

 .sync-head b i {
     font-size: 6px
 }

 .sync-row {
     display: flex;
     align-items: center;
     gap: 8px;
     border-top: 1px solid #e6edf2;
     padding: 10px 0;
     font-size: 10px
 }

 .sync-row i {
     color: var(--green)
 }

 .sync-row span {
     flex: 1
 }

 .sync-row small {
     color: #9aa7b5
 }

 .product-link {
     font-size: 13px;
     font-weight: 850;
     color: var(--ink);
     display: inline-flex;
     gap: 8px;
     align-items: center
 }

 .product-link i {
     color: var(--green)
 }

 .connected-section,
 .technology-section {
     background: var(--navy);
     color: #fff;
     position: relative;
     overflow: hidden
 }

 .light-title {
     color: #fff
 }

 .light-copy {
     color: #aebfd0;
     line-height: 1.8
 }

 .connected-points {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 25px;
     color: #b8c8d7;
     font-size: 13px
 }

 .connected-points i {
     color: var(--green);
     margin-right: 8px
 }

 .architecture {
     height: 430px;
     border: 1px solid rgba(255, 255, 255, .13);
     background: rgba(255, 255, 255, .045);
     border-radius: 30px;
     padding: 24px;
     position: relative;
     overflow: hidden
 }

 .arch-top {
     display: flex;
     justify-content: space-between
 }

 .arch-pill,
 .arch-live {
     font-size: 9px;
     letter-spacing: 1.5px;
     color: #9fb2c6
 }

 .arch-live i {
     color: var(--green);
     font-size: 6px
 }

 .arch-flow {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 230px
 }

 .arch-node,
 .arch-hub {
     width: 125px;
     min-height: 115px;
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(255, 255, 255, .06);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center
 }

 .arch-node i,
 .arch-hub i {
     font-size: 24px;
     color: #75dcb4
 }

 .arch-node b,
 .arch-hub b {
     font-size: 13px;
     margin-top: 7px
 }

 .arch-node small,
 .arch-hub small {
     font-size: 8px;
     color: #8ea4bb;
     letter-spacing: 1px
 }

 .arch-hub {
     width: 150px;
     border-color: rgba(33, 183, 122, .45);
     background: rgba(33, 183, 122, .08)
 }

 .arch-connector {
     width: 80px;
     height: 1px;
     background: rgba(80, 210, 157, .4);
     position: relative
 }

 .arch-connector span {
     position: absolute;
     width: 6px;
     height: 6px;
     background: var(--green);
     border-radius: 50%;
     top: -3px;
     animation: move 2.2s linear infinite
 }

 @keyframes move {
     0% {
         left: 0
     }

     100% {
         left: 100%
     }
 }

 .arch-bottom {
     position: absolute;
     bottom: 23px;
     left: 24px;
     right: 24px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px
 }

 .arch-bottom div {
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 12px;
     padding: 11px;
     text-align: center;
     color: #9cb0c4;
     font-size: 10px
 }

 .arch-bottom i {
     color: var(--green);
     margin-right: 5px
 }

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

 .automation-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 25px;
     padding: 26px;
     min-height: 380px;
     box-shadow: 0 15px 50px rgba(7, 26, 51, .06)
 }

 .automation-icon {
     width: 48px;
     height: 48px;
     border-radius: 15px;
     background: var(--mint);
     color: var(--green2);
     display: grid;
     place-items: center;
     font-size: 21px;
     margin-bottom: 25px
 }

 .automation-card>span {
     font-size: 9px;
     letter-spacing: 1.6px;
     font-weight: 900;
     color: #8a99aa
 }

 .automation-card h3 {
     font-size: 22px;
     letter-spacing: -.8px;
     margin: 9px 0 25px
 }

 .automation-flow {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px
 }

 .automation-flow b {
     font-size: 10px;
     background: #f4f7fa;
     padding: 10px 14px;
     border-radius: 10px;
     width: 100%;
     text-align: center
 }

 .automation-flow i {
     font-size: 11px;
     color: var(--green)
 }

 .channel-flow {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 40px
 }

 .flow-source {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background: var(--navy);
     color: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center
 }

 .flow-source i {
     color: var(--green);
     font-size: 20px
 }

 .flow-source b {
     font-size: 10px
 }

 .flow-lines {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .flow-lines i {
     height: 1px;
     background: linear-gradient(90deg, var(--green), #dce9e3)
 }

 .flow-channels {
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .flow-channels b {
     font-size: 9px;
     padding: 9px 12px;
     background: #f2f6f9;
     border-radius: 9px
 }

 .monitor-ui {
     border: 1px solid #e4ebf1;
     border-radius: 14px;
     overflow: hidden
 }

 .monitor-ui div {
     display: flex;
     justify-content: space-between;
     padding: 13px;
     border-bottom: 1px solid #e8eef2;
     font-size: 10px
 }

 .monitor-ui div:last-child {
     border: 0
 }

 .monitor-ui b {
     color: var(--green2)
 }

 .difference-list {
     border-top: 1px solid var(--line)
 }

 .quote-box {
     margin-top: 30px;
     padding: 22px;
     border-left: 3px solid var(--green);
     background: var(--soft);
     display: flex;
     gap: 15px
 }

 .quote-box i {
     font-size: 26px;
     color: var(--green)
 }

 .quote-box strong {
     font-size: 17px;
     line-height: 1.6
 }

 .difference-item {
     display: grid;
     grid-template-columns: 40px 1fr 30px;
     gap: 16px;
     padding: 25px 0;
     border-bottom: 1px solid var(--line);
     align-items: start;
     transition: .25s
 }

 .difference-item:hover {
     padding-left: 10px
 }

 .difference-item>span {
     font-size: 10px;
     color: var(--green);
     font-weight: 900
 }

 .difference-item h3 {
     font-size: 19px;
     margin: 0 0 7px
 }

 .difference-item p {
     margin: 0;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.65
 }

 .difference-item>i {
     color: #9aa8b6
 }

 .audience-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 12px
 }

 .audience-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 22px;
     padding: 23px;
     min-height: 250px;
     transition: .3s
 }

 .audience-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow)
 }

 .audience-card i {
     font-size: 25px;
     color: var(--green)
 }

 .audience-card span {
     display: block;
     font-size: 9px;
     color: #9aa7b5;
     margin-top: 30px
 }

 .audience-card h3 {
     font-size: 18px;
     margin: 8px 0
 }

 .audience-card p {
     font-size: 12px;
     line-height: 1.7;
     color: var(--muted)
 }

 .tech-tags {
     display: flex;
     gap: 9px;
     flex-wrap: wrap;
     margin-top: 28px
 }

 .tech-tags span {
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(255, 255, 255, .05);
     padding: 10px 12px;
     border-radius: 20px;
     font-size: 11px;
     color: #b8c8d7
 }

 .tech-console {
     border: 1px solid rgba(255, 255, 255, .13);
     background: #041426;
     border-radius: 22px;
     overflow: hidden
 }

 .console-head {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px 18px;
     border-bottom: 1px solid rgba(255, 255, 255, .09);
     font-size: 10px;
     color: #8095aa
 }

 .browser-dots {
     display: flex;
     gap: 5px
 }

 .browser-dots i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #496079
 }

 .console-head b {
     margin-left: auto;
     font-size: 8px;
     color: #65d8aa;
     letter-spacing: 1px
 }

 .console-body {
     padding: 16px 20px
 }

 .console-line {
     display: grid;
     grid-template-columns: 35px 1fr auto;
     gap: 12px;
     padding: 15px 0;
     border-bottom: 1px solid rgba(255, 255, 255, .07);
     font-family: monospace;
     font-size: 11px
 }

 .console-line span {
     color: #526a82
 }

 .console-line b {
     color: #c3d3e1;
     font-weight: 500
 }

 .console-line em {
     font-style: normal;
     color: #5bd39f;
     font-size: 10px
 }

 .console-footer {
     padding: 14px 20px;
     background: rgba(255, 255, 255, .025);
     font-size: 9px;
     color: #7990a8
 }

 .console-footer i {
     color: var(--green);
     margin-right: 6px
 }

 .roadmap {
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px
 }

 .road-line {
     position: absolute;
     left: 8%;
     right: 8%;
     top: 24px;
     height: 1px;
     background: #dce6ed
 }

 .road-step {
     position: relative;
     padding-top: 60px
 }

 .road-dot {
     position: absolute;
     top: 0;
     left: 0;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     border: 1px solid #dbe6ed;
     background: #fff;
     display: grid;
     place-items: center;
     font-size: 11px;
     font-weight: 800;
     color: #8998a8;
     z-index: 2
 }

 .road-step.active .road-dot {
     background: var(--green);
     border-color: var(--green);
     color: #062038
 }

 .road-step>span {
     font-size: 9px;
     font-weight: 900;
     letter-spacing: 1.6px;
     color: #8a99a9
 }

 .road-step h3 {
     font-size: 19px;
     margin: 8px 0
 }

 .road-step p {
     font-size: 12px;
     color: var(--muted);
     line-height: 1.7
 }

 .vision-card {
     background: var(--navy);
     color: #fff;
     border-radius: 36px;
     padding: 75px;
     position: relative;
     overflow: hidden;
     text-align: center
 }

 .vision-glow {
     position: absolute;
     width: 500px;
     height: 500px;
     background: rgba(33, 183, 122, .12);
     border-radius: 50%;
     left: 50%;
     top: -300px;
     transform: translateX(-50%)
 }

 .vision-card h2 {
     position: relative;
     font-size: clamp(42px, 5vw, 70px);
     letter-spacing: -3px;
     line-height: 1.02;
     margin: 18px 0 25px
 }

 .vision-card p {
     position: relative;
     max-width: 750px;
     margin: 10px auto;
     color: #aebfd0;
     line-height: 1.8;
     font-size: 14px
 }

 .vision-statement {
     position: relative;
     display: flex;
     justify-content: center;
     gap: 9px;
     flex-wrap: wrap;
     margin-top: 32px
 }

 .vision-statement span {
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(255, 255, 255, .05);
     padding: 11px 15px;
     border-radius: 20px;
     color: #c8d5e0;
     font-size: 11px
 }

 .cta-section {
     padding: 120px 0;
     background: linear-gradient(120deg, #06172d, #0b2948);
     color: #fff;
     position: relative;
     overflow: hidden
 }

 .cta-orb {
     position: absolute;
     border-radius: 50%;
     opacity: .18
 }

 .cta-a {
     width: 500px;
     height: 500px;
     background: var(--green);
     left: -280px;
     top: -250px
 }

 .cta-b {
     width: 400px;
     height: 400px;
     background: #2c8dd0;
     right: -230px;
     bottom: -240px
 }

 .cta-inner {
     text-align: center;
     position: relative
 }

 .cta-inner h2 {
     font-size: clamp(43px, 5vw, 72px);
     line-height: 1.02;
     letter-spacing: -3px;
     margin: 18px 0
 }

 .cta-inner h2 span {
     color: var(--green)
 }

 .cta-inner>p {
     max-width: 650px;
     margin: auto;
     color: #aebfd0;
     line-height: 1.8
 }

 .cta-contact {
     display: flex;
     justify-content: center;
     gap: 24px;
     flex-wrap: wrap;
     color: #9db0c3;
     font-size: 12px;
     margin-top: 25px
 }

 .cta-contact i {
     color: var(--green);
     margin-right: 6px
 }

 .site-footer {
     background: #041326;
     color: #fff;
     padding: 75px 0 25px
 }

 .footer-brand {
     font-size: 28px;
     font-weight: 900;
     letter-spacing: -1.5px;
     color: #fff;
     display: inline-flex;
     align-items: center
 }

 .footer-brand i {
     color: var(--green);
     font-size: 11px;
     margin-left: 4px
 }

 .footer-copy {
     max-width: 440px;
     color: #8295aa;
     line-height: 1.8;
     font-size: 13px;
     margin: 20px 0
 }

 .footer-contact {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
     color: #9eb0c2;
     font-size: 11px
 }

 .footer-contact i {
     color: var(--green);
     margin-right: 5px
 }

 .site-footer h6 {
     font-size: 10px;
     letter-spacing: 1.7px;
     color: #6f849a;
     margin-bottom: 17px
 }

 .site-footer a {
     display: block;
     color: #9eb0c2;
     font-size: 12px;
     margin: 0 0 11px
 }

 .site-footer a:hover {
     color: #fff
 }

 .footer-small {
     font-size: 12px;
     color: #8295aa;
     line-height: 1.8
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .08);
     margin-top: 50px;
     padding-top: 22px;
     display: flex;
     justify-content: space-between;
     color: #60758c;
     font-size: 10px
 }

 .back-top {
     position: fixed;
     right: 20px;
     bottom: 20px;
     width: 44px;
     height: 44px;
     border-radius: 13px;
     border: 0;
     background: var(--navy);
     color: #fff;
     z-index: 90;
     opacity: 0;
     visibility: hidden;
     transition: .3s
 }

 .back-top.show {
     opacity: 1;
     visibility: visible
 }

 .back-top:hover {
     background: var(--green);
     color: var(--navy)
 }

 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity .8s ease, transform .8s ease
 }

 .reveal.visible {
     opacity: 1;
     transform: none
 }

 .delay-1 {
     transition-delay: .12s
 }

 .delay-2 {
     transition-delay: .22s
 }

 .delay-3 {
     transition-delay: .32s
 }

 .delay-4 {
     transition-delay: .42s
 }

 @media(max-width:991px) {
     .site-nav {
         background: rgba(7, 26, 51, .96)
     }

     .navbar-collapse {
         background: var(--navy);
         padding: 15px;
         border-radius: 0 0 18px 18px
     }

     .hero {
         padding-top: 130px
     }

     .ecosystem-visual {
         margin-top: 50px;
         height: 500px
     }

     .problem-board {
         grid-template-columns: 1fr
     }

     .problem-arrow {
         transform: rotate(90deg);
         height: 35px
     }

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

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

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

     .road-line {
         display: none
     }
 }

 @media(max-width:767px) {
     .hero {
         min-height: auto;
         padding: 120px 0 70px
     }

     .hero-title {
         font-size: 51px;
         letter-spacing: -3px
     }

     .hero-copy {
         font-size: 15px
     }

     .hero-trust {
         gap: 10px;
         flex-direction: column
     }

     .ecosystem-visual {
         height: 430px;
         transform: scale(.78);
         transform-origin: top center;
         margin-bottom: -70px
     }

     .ring-one {
         width: 310px;
         height: 310px
     }

     .ring-two {
         width: 420px;
         height: 420px
     }

     .node-pms {
         left: 0;
         top: 45px
     }

     .node-rms {
         right: 0;
         top: 45px
     }

     .node-booking {
         left: 0;
         bottom: 45px
     }

     .node-channel {
         right: 0;
         bottom: 45px
     }

     .ecosystem-strip-inner {
         gap: 10px;
         flex-wrap: wrap;
         padding: 20px
     }

     .strip-label {
         width: 100%;
         text-align: center
     }

     .section-padding {
         padding: 78px 0
     }

     .section-title {
         letter-spacing: -2px
     }

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

     .product-card {
         min-height: auto
     }

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

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

     .road-step {
         padding-top: 58px;
         padding-left: 65px;
         min-height: 145px
     }

     .road-line {
         display: none
     }

     .vision-card {
         padding: 48px 24px;
         border-radius: 26px
     }

     .footer-bottom {
         flex-direction: column;
         gap: 8px
     }

     .problem-board {
         padding: 20px
     }

     .tool-cloud {
         grid-template-columns: 1fr 1fr
     }

     .arch-flow {
         transform: scale(.78);
         margin-left: -35px;
         margin-right: -35px
     }

     .arch-bottom {
         grid-template-columns: 1fr
     }

     .architecture {
         height: 480px
     }

     .console-line {
         grid-template-columns: 25px 1fr
     }

     .console-line em {
         grid-column: 2
     }

     .cta-section {
         padding: 90px 0
     }
 }

 .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.footer-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);

    background: rgba(255, 255, 255, .045);

    color: #9eb0c2;
    font-size: 16px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.footer-social a:hover {
    transform: translateY(-4px);

    background: var(--green);
    border-color: var(--green);

    color: var(--navy);

    box-shadow:
        0 12px 30px rgba(24, 184, 107, .22);
}