@media only screen and (max-width:1400px) {
    header nav .navbar-nav>li>a {
        margin: 0 10px !important;
    }
    .menu-center .header-social-icon {
        padding-left: 5px;
    }
  }


  @media only screen and (max-width:1200px) {
    header nav .navbar-nav>li>a{
    margin: 0 5px !important;
}
  }

/*----------24-08-2026-------*/
:root {
    --white: #ffffff;

    --cyan: #0ea5e9;
    --cyan-deep: #0284c7;
    --cyan-tint: #f0f9ff;
    --cyan-tint-2: #e0f2fe;

    --teal: #0f2742;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;

    --radius: 18px;

    --shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 30px -16px rgba(15, 23, 42, 0.16);

    --header-h: 83px;
}

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 56px); }
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:'Manrope', -apple-system, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4, .wordmark{
    font-family:'Sora', 'Manrope', sans-serif;
    color:var(--teal);
    margin:0;
    letter-spacing:-0.01em;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:1440px; margin:0 auto; padding:0 28px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--cyan-deep);
    margin-bottom:2px;
  }
  .eyebrow::before{
    content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan);
    box-shadow:0 0 0 3px var(--cyan-tint-2);
  }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2.5px solid var(--cyan); outline-offset:3px; border-radius:4px; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 24px; border-radius:999px; font-weight:600; font-size:15px;
    border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--cyan); color:var(--white); box-shadow:0 10px 24px -10px rgba(91,79,224,0.55); }
  .btn-primary:hover{ background:var(--cyan-deep); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(91,79,224,0.6); }
  .btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4); }
  .btn-ghost:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.7); }
  .btn-card{
    width:100%; background:var(--teal); color:var(--white) !important; padding:12px 18px; border-radius:12px; font-size:14.5px;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-card i{ font-size:13px; transition:transform .2s ease; }
  .btn-card:hover{ background:var(--cyan-deep); }
  .btn-card:hover i{ transform:translateX(3px); }

  /* ---------- Section tab nav ---------- */
  .section-tabs{
    position:sticky; top:80px; z-index:40;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    border-top:1px solid var(--line);
    margin-top: 100px;
  }
  .tabs-inner{ display:flex; gap:6px; padding:14px 28px; overflow-x:auto; }
  .tab-link{
    flex:none; padding:10px 20px; border-radius:999px; font-size:14.5px; font-weight:600;
    color:var(--muted); border:1.5px solid transparent; transition:all .18s ease;
    display:flex; align-items:center; gap:8px;
  }
  .tab-link i{ font-size:13px; color:var(--cyan); }
  .tab-link:hover{ background:var(--cyan-tint); color:var(--teal); }
  .tab-link.active{ background:var(--teal); color:var(--white); }
  .tab-link.active i{ color:#c9c3ff; }

  /* ---------- Mini intro (About 5thir, compact) ---------- */
.mini-intro{ padding:26px 0 22px; text-align:center; }
.mini-intro .wrap{ max-width:780px; margin:0 auto; padding:0 28px; }
.mini-intro .eyebrow{ justify-content:center; margin-bottom:10px; }
.mini-intro h2{ font-size:clamp(28px,3.6vw,38px); font-weight:800; margin-bottom:8px; line-height:1.15; letter-spacing:-0.02em; }
.mini-intro p{ color:var(--muted); font-size:14.5px; max-width:600px; margin:0 auto; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    background:radial-gradient(120% 140% at 15% -10%, #2a2f6b 0%, var(--teal) 45%, #05060f 100%);
    color:var(--white);
    padding:0px 0 10px;
    scroll-margin-top: calc(var(--header-h) + 56px);
  }
  .hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:36px; align-items:center; }
  .hero-copy .eyebrow{ color:#c9c3ff; font-size:14px; }
  .hero-copy .eyebrow::before{ background:#c9c3ff; box-shadow:0 0 0 3px rgba(201,195,255,0.25); }
  .hero h1{ color:var(--white); font-size:clamp(38px,5.2vw,50px); font-weight:700; line-height:1.1; margin-bottom:24px; text-shadow:0 2px 24px rgba(0,0,0,0.15); }
  .hero h1 em{ font-style:normal; color:#c9c3ff; }
  .hero p.lead{ font-size:19px; color:#dbdcf5; max-width:500px; margin-bottom:0; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 34px; }

  /* Hub diagram */
  .hub-wrap{ position:relative; }
  .hub-svg{ width:580px; height:480px; max-width:100%; display:block; margin:0 auto; }
  .hub-node circle.node-bg{ fill:#1c2154; stroke:rgba(255,255,255,0.16); stroke-width:1; transition:fill .2s ease, stroke .2s ease; }
  .hub-node{ cursor:default; }
  .hub-node:hover circle.node-bg{ fill:var(--cyan); stroke:#c9c3ff; }
  .node-fa{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
  .node-fa i{ font-size:35px; color:#c3c5ea; transition:color .2s ease; }
  .hub-node:hover .node-fa i{ color:var(--white); }
  .hub-node text{ fill:#b3b6dd; font-family:'Manrope',sans-serif; font-size:18px; font-weight:600; transition:fill .2s ease; }
  .hub-node:hover text{ fill:var(--white); }
  .hub-line{ stroke:rgba(160,160,224,0.25); stroke-width:1.6; }
  .hub-center circle{ fill:var(--cyan); }
  .hub-center text{ fill:var(--white); font-size:21px; font-weight:700; font-family:'Sora',sans-serif; }
  @media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } .hub-wrap{ order:-1; max-width:420px; margin:0 auto 8px; } }
  @media (max-width:768px){ .hub-svg{ width:420px; height:420px; } }
  @media (max-width:480px){ .hub-svg{ width:340px; height:340px; } }

  /* ---------- Section heads ---------- */
  .section-head{ max-width:1200px; margin-bottom:44px; }
  .section-head h2{ font-size:clamp(24px,3vw,34px); font-weight:700; margin-bottom:0px; line-height:1.25; }
  .section-head p{ color:var(--muted); font-size:15.5px; }
  .section-badge{
    display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px;
    background:var(--white); border:1px solid var(--line); border-radius:999px;
    font-size:12.5px; font-weight:600; color:var(--teal); margin-bottom:16px;
  }
  .section-badge .dot{ width:18px; height:18px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; }
  .section-badge .dot i{ color:#c9c3ff; font-size:9px; }

  /* ---------- Card grid (shared) ---------- */
  .products{ padding:40px 0 36px; scroll-margin-top: calc(var(--header-h) + 56px); }
  .accelerators{ padding:36px 0 40px; background:var(--cyan-tint); scroll-margin-top: calc(var(--header-h) + 56px); }
  .identity{ padding:72px 0 36px; background:var(--cyan-tint); scroll-margin-top: calc(var(--header-h) + 56px); }

  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .grid.grid-5{ grid-template-columns:repeat(5,1fr); }
  .grid.grid-4{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:1080px){ .grid.grid-5, .grid.grid-4{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:640px){ .grid, .grid.grid-5, .grid.grid-4{ grid-template-columns:1fr; } }

  .card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; display:flex; flex-direction:column; box-shadow:var(--shadow);
    opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .card.in{ opacity:1; transform:translateY(0); }
  .card:hover{ border-color:var(--cyan); box-shadow:0 20px 40px -18px rgba(91,79,224,0.35); }
  .accelerators .card{ padding:22px; }

  .card-icon{
    width:52px; height:52px; border-radius:14px;
    background:linear-gradient(155deg, var(--cyan-tint) 0%, var(--cyan-tint-2) 100%);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    border:1px solid var(--cyan-tint-2);
  }
  .card-icon i{ font-size:22px; color:var(--teal); }
  .card-tag{ font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cyan-deep); margin-bottom:8px; }
  .card h3{ font-size:18px; font-weight:700; margin-bottom:10px;line-height: 1.2; }
  .card p.desc{ color:var(--muted); font-size:14px; margin-bottom:18px; flex-grow:1; line-height:1.45; }
  .card ul{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:8px; }
  .card ul li{ font-size:13.5px; color:var(--teal); display:flex; align-items:center; gap:8px; font-weight:500; }
  .card ul li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan); flex:none; }

  .card.wide{ background:linear-gradient(155deg,var(--teal) 0%, #05060f 100%); border-color:var(--teal); }
  .card.wide .card-tag{ color:#c9c3ff; }
  .card.wide h3{ color:var(--white); }
  .card.wide p.desc{ color:#c3c5ea; }
  .card.wide ul li{ color:#e5e6fa; }
  .card.wide ul li::before{ background:#c9c3ff; }
  .card.wide .card-icon{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); }
  .card.wide .card-icon i{ color:#c9c3ff; }
  .card.wide .btn-card{ background:var(--cyan); }
  .card.wide .btn-card:hover{ background:var(--cyan-deep); }
  .card.wide:hover{ border-color:var(--cyan); }

  .card.featured{
    grid-column:1 / -1; flex-direction:row; align-items:center; gap:32px;
    background:linear-gradient(120deg, #232a5c 0%, var(--teal) 100%);
    border:none; padding:24px 40px; position:relative; overflow:hidden;
    box-shadow:0 24px 50px -20px rgba(91,79,224,0.45);
  }
  .card.featured::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(60% 120% at 90% 0%, rgba(255,255,255,0.16), transparent 60%);
    pointer-events:none;
  }
  .card.featured .badge{
    position:absolute; top:20px; right:24px;
    background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.4);
    color:var(--white); font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    padding:6px 14px; border-radius:999px;
  }
  .card.featured .card-icon{ width:72px; height:72px; flex:none; margin-bottom:0; background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.3); }
  .card.featured .card-icon i{ font-size:32px; color:var(--white); }
  .card.featured .card-body{ flex:1; }
  .card.featured .card-tag{ color:#e8e7ff; margin-bottom:10px; }
  .card.featured h3{ color:var(--white); font-size:24px; margin-bottom:10px; }
  .card.featured p.desc{ color:#ecebff; font-size:15.5px; margin-bottom:16px; line-height:1.4; }
  .card.featured ul{ flex-direction:row; flex-wrap:wrap; gap:10px 22px; margin-bottom:22px; }
  .card.featured ul li{ color:#f3f2ff; }
  .card.featured ul li::before{ background:var(--white); }
  .card.featured .btn-card{ width:auto; display:inline-block; background:var(--white); color:var(--teal) !important; padding:13px 26px; }
  .card.featured .btn-card:hover{ background:#eeeeff; }
  @media (max-width:760px){ .card.featured{ flex-direction:column; align-items:flex-start; } .card.featured .badge{ position:static; margin-bottom:14px; } }

  .card-link{ font-size:13.5px; font-weight:600; color:var(--cyan-deep); display:inline-flex; align-items:center; gap:6px; margin-top:auto; }
  .card-link i{ font-size:11px; transition:transform .2s ease; }
  .card-link:hover i{ transform:translateX(3px); }

  /* ---------- App section ---------- */
  .app-section{ padding:72px 0 90px; scroll-margin-top: calc(var(--header-h) + 56px); }
  .app-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
  @media (max-width:900px){ .app-grid{ grid-template-columns:1fr; } }
  .app-badge{
    display:inline-flex; align-items:center; gap:8px; padding:7px 16px 7px 10px;
    background:var(--cyan-tint); border:1px solid var(--cyan-tint-2); border-radius:999px;
    font-size:12.5px; font-weight:700; color:var(--cyan-deep); margin-bottom:18px;
  }
  .app-copy h2{ font-size: clamp(24px, 3vw, 27px);
    margin-bottom: 14px;
    line-height: 1.1;
    font-weight: 800; }
  .app-copy > p{ color:var(--muted); font-size:15.5px; margin-bottom:28px; max-width:480px; }

  .cardix-feature{
    display:flex; gap:16px; padding:24px; background:var(--cyan-tint); border:1px solid var(--cyan-tint-2);
    border-radius:16px; margin-bottom:28px;
  }
  .cardix-feature-icon{
    width:46px; height:46px; flex:none; border-radius:12px; background:var(--white);
    display:flex; align-items:center; justify-content:center; color:var(--cyan-deep); font-size:18px;
    border:1px solid var(--cyan-tint-2);
  }
  .cardix-feature-label{ font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--cyan-deep); }
  .cardix-feature-title{ font-size:16.5px; margin:6px 0 8px; font-weight:700; line-height: 1.2; }
  .cardix-feature-desc{ color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:16px; }
  .cardix-steps{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .cardix-step{ display:flex; flex-direction:column; align-items:center; gap:8px; width:88px; text-align:center; }
  .cardix-step-icon{
    width:42px; height:42px; border-radius:12px; background:var(--white); border:1px solid var(--cyan-tint-2);
    display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:15px;
  }
  .cardix-step span{ font-size:11.5px; font-weight:600; color:var(--teal); line-height:1.3; }
  .cardix-arrow{ color:var(--line); font-size:14px; flex:none; }

  .app-links{ display:flex; gap:14px; flex-wrap:wrap; }
  .store-btn{
    display:flex; align-items:center; gap:10px; padding:11px 20px; border-radius:12px;
    background:var(--teal); color:var(--white); font-weight:600; font-size:14.5px; transition:background .18s ease;
  }
  .store-btn i{ font-size:22px; }
  .store-btn small{ display:block; font-size:10.5px; font-weight:500; color:#a6abd6; }
  .store-btn:hover{ background:var(--cyan-deep); }


  /* ---------- CTA banner ---------- */
  .cta-banner{ padding:20px 0 100px; }
  .cta-banner .inner{
    background:linear-gradient(120deg, #3d34a8 0%, var(--teal) 100%);
    border-radius:24px; padding:36px 40px; color:var(--white);
    display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  }
  .cta-banner h2{ color:var(--white); font-size:clamp(22px,2.8vw,30px); margin-bottom:8px; }
  .cta-banner p{ color:#e6e5fb; font-size:15px; max-width:440px; }
  .cta-banner .btn-primary{ background:var(--white); color:var(--teal); box-shadow:none; }
  .cta-banner .btn-primary:hover{ background:#eeeeff; color:var(--teal); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .card{ transition:none; opacity:1; transform:none; }
  }
  
header.sticky nav.navbar .navbar-nav > li > a,
header.sticky nav.navbar .navbar-nav > li > a:hover,
header.sticky nav.navbar .navbar-nav > li.active > a,
header.sticky nav.navbar.bootsnav ul.nav > li > a,
header.sticky nav.navbar.bootsnav ul.nav > li > a:hover {
    color: #fff !important;
}


.info-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--white);
    text-decoration: none;
    background: linear-gradient(
        100deg,
        var(--teal),
        var(--cyan-deep) 60%,
        var(--cyan) 140%
    );
    box-shadow: var(--shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}

.info-cta:hover {
    color: var(--white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* ================= KIOSK SOLUTIONS — grouped box ================= */

.kiosk-group {
  margin-top: 48px;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, #101828 0%, #1a2436 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -20px rgba(16, 24, 40, 0.45);
  position: relative;
  overflow: hidden;
}

.kiosk-group::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.kiosk-group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.kiosk-group-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 20px;
}

.kiosk-group-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kiosk-group-badge {
  display: inline-block;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
}

.kiosk-group-text h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

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

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

@media (max-width: 560px) {
  .kiosk-grid {
    grid-template-columns: 1fr;
  }
  .kiosk-group {
    padding: 24px 18px;
  }
}

.kiosk-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.kiosk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.kiosk-card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  font-size: 18px;
  margin-bottom: 14px;
}

.kiosk-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 8px;
}

.kiosk-card h4 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.kiosk-card p.desc {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  line-height: 1.55;
  flex-grow: 1;
}

.kiosk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: opacity 0.2s ease;
  width: fit-content;
}

.kiosk-btn:hover {
  opacity: 0.85;
  color: #fff;
}

.kiosk-btn i {
  font-size: 12px;
}