/* ════════════════════════════════════════
   ROOT — Wetroo theme tokens
   Navy #1d2878 · Orange #f35c25 · White
════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

   .ringgai_aicallingFullBody{
      --bg: #FFFFFF;
      --bg2: #F6F8FF;
      --bg3: #EEF1FA;
      --navy: #1d2878;
      --navy-dark: #141f60;
      --navy-lt: #e8eaf8;
      --navy-mid: #c5caf0;
      --orange: #f35c25;
      --orange-lt: #fff1ec;
      --orange-md: #fdddd3;
      --text: #000000;
      --text2: #3a3f5c;
      --muted: #7880a4;
      --border: #e2e6f0;
      --border2: #cdd2eb;
      --green: #16a34a;
      --green-lt: #dcfce7;
      --red: #dc2626;
      --red-lt: #fee2e2;
      --font: 'Plus Jakarta Sans', sans-serif;
      --display: 'Bricolage Grotesque', sans-serif;
      --radius: 14px;
      --radius-lg: 22px;
      --sh-sm: 0 2px 12px rgba(29, 40, 120, 0.08);
      --sh-md: 0 6px 30px rgba(29, 40, 120, 0.12);
      --sh-lg: 0 12px 50px rgba(29, 40, 120, 0.16);
    }

    html {
      font-size: 15px;
      -webkit-font-smoothing: antialiased;
      scroll-behavior: smooth;
    }

    body {     
      color: var(--text);
      overflow-x: hidden;
      line-height: 1.65;
    }

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

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

    ::-webkit-scrollbar-track {
      background: var(--bg2);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 5px;
    }
   
    .tag-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--navy-lt);
      border: 1px solid var(--navy-mid);
      color: var(--navy);
      font-size: 11.5px;
  font-family: "Inter-Bold";
      padding: 5px 14px;
      border-radius: 100px;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .tag-orange {
      background: var(--orange-lt);
      border-color: var(--orange-md);
      color: var(--orange);
    }

    .sec-title {
      font-family: var(--display);
      font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-family: "Inter-Bold";
      line-height: 1.1;
      letter-spacing: -.025em;
      color: var(--text);
      margin-bottom: 14px;
    }

    .sec-sub {
      font-size: 1rem;
      color: var(--text2);
      line-height: 1.72;
      max-width: 580px;
    }

    .sec-center {
      text-align: center;
    }

    .sec-center .sec-sub {
      margin: 0 auto;
    }

    .hl-n {
      color: var(--navy);
    }

    .hl-o {
      color: var(--orange);
    }

    .fade-in {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .55s ease, transform .55s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .d1 {
      transition-delay: .1s;
    }

    .d2 {
      transition-delay: .2s;
    }

    .d3 {
      transition-delay: .3s;
    }

    /* ── Buttons ── */
    .btn-navy {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--navy);
      color: #fff;
      padding: 11px 24px;
      border-radius: 9px;
      font-size: 14px;
  font-family: "Inter-Bold";
      border: none;
      cursor: pointer;
      font-family: var(--font);
      transition: all .22s;
      box-shadow: 0 4px 20px rgba(29, 40, 120, .22);
    }

    .btn-navy:hover {
      background: var(--navy-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(29, 40, 120, .32);
    }

    .btn-navy:active {
      transform: scale(.97);
    }

    .btn-orange {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange);
      color: #fff;
      padding: 11px 24px;
      border-radius: 9px;
      font-size: 14px;
  font-family: "Inter-Bold";
      border: none;
      cursor: pointer;
      font-family: var(--font);
      transition: all .22s;
      box-shadow: 0 4px 18px rgba(243, 92, 37, .28);
    }

    .btn-orange:hover {
      background: #d94c18;
      transform: translateY(-2px);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--navy);
      padding: 10px 22px;
      border-radius: 9px;
      font-size: 14px;
  font-family: "Inter-SemiBold";
      border: 1.5px solid var(--border2);
      cursor: pointer;
      font-family: var(--font);
      transition: all .22s;
    }

    .btn-ghost:hover {
      background: var(--navy-lt);
      border-color: var(--navy-mid);
    }

   
    /* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
    .hero {
      padding: 76px 0 76px;
      background: var(--bg);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 55%;
      height: 100%;
      background: linear-gradient(160deg, var(--bg2) 0%, var(--navy-lt) 60%, rgba(243, 92, 37, .04) 100%);
      clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
      z-index: 0;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(var(--navy-lt), transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

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

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--orange-lt);
      border: 1px solid var(--orange-md);
      color: var(--orange);
      font-size: 11.5px;
  font-family: "Inter-Bold";
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 20px;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .hero-tag .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--orange);
      animation: blink 1.5s infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .hero-title {
    font-family: var(--display);
    font-size: 60px;
    /* font-weight: 800; */
    line-height: 1.07;    
    color: var(--text);
    margin-bottom: 18px;
    font-family: "Inter-Bold";
    font-family: "Inter-Black";
    }

    .hero-sub {
      font-size: 1.05rem;
      color: var(--text2);
      max-width: 700px;
      margin: 0 auto 36px;
      line-height: 1.72;
    }

    /* ── PHONE DEMO WIDGET ── */
    .demo-wrap {
      display: flex;
      justify-content: center;
    }

    .demo-widget {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 13px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 22px 28px 22px;
      box-shadow: var(--sh-md);
      min-width: 390px;
      max-width: 500px;
      width: 100%;
      position: relative;
    }

    .demo-widget::before {
      content: '';
      position: absolute;
      top: 0;
      left: 28px;
      right: 28px;
      height: 3px;
      background: linear-gradient(90deg, var(--navy), var(--orange));
      border-radius: 0 0 4px 4px;
    }

    .demo-widget-label {
      font-family: var(--display);
      font-size: 16px;
  font-family: "Inter-Bold";
      color: var(--text2);
      letter-spacing: -.01em;
    }

    /* Input row */
    .demo-row {
      display: flex;
      align-items: stretch;
      width: 100%;
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      overflow: visible;
      background: #fff;
      position: relative;
      transition: border-color .2s, box-shadow .2s;
    }

    .demo-row:focus-within {
      border-color: var(--navy);
      box-shadow: 0 0 0 3px var(--navy-lt);
    }

    /* Country picker */
    .country-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px 0 13px;
      background: var(--bg2);
      border-right: 1.5px solid var(--border);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      transition: background .15s;
      border-radius: 0;
      font-family: var(--font);
      min-width: 78px;
    }

    .country-btn:hover {
      background: var(--bg3);
    }

    .c-flag {
      font-size: 19px;
      line-height: 1;
    }

    .c-code {
      font-size: 13px;
  font-family: "Inter-SemiBold";
      color: var(--text2);
    }

    .c-chev {
      font-size: 8px;
      color: var(--muted);
      margin-left: 1px;
    }

    /* Dropdown */
    .c-dropdown {
      position: absolute;
      top: calc(100% + 7px);
      left: -1px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--sh-md);
      min-width: 210px;
      z-index: 600;
      overflow: hidden;
      display: none;
    }

    .c-dropdown.open {
      display: block;
    }

    .c-opt {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text2);
      transition: background .12s;
    }

    .c-opt:hover {
      background: var(--navy-lt);
      color: var(--navy);
    }

    .c-opt.active {
      background: var(--navy-lt);
      color: var(--navy);
  font-family: "Inter-SemiBold";
    }

    .c-opt .cf {
      font-size: 16px;
    }

    .c-opt .cc {
      color: var(--muted);
      margin-left: auto;
      font-size: 12px;
    }

    /* Phone input */
    .phone-inp {
      flex: 1;
      padding: 13px 14px;
      border: none;
      outline: none;
      font-family: var(--font);
      font-size: 14px;
      color: var(--text);
      background: transparent;
      min-width: 0;
      letter-spacing: .02em;
    }

    .phone-inp::placeholder {
      color: #bbbfce;
    }

    /* Try button */
    .try-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--navy);
      color: #fff;
      padding: 0 22px;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      font-family: var(--display);
      font-size: 14.5px;
  font-family: "Inter-Bold";
      white-space: nowrap;
      letter-spacing: -.01em;
      transition: all .22s;
      border-radius: 0 8px 8px 0;
    }

    .try-btn:hover {
      background: var(--navy-dark);
    }

    .try-btn svg {
      width: 15px;
      height: 15px;
      fill: #fff;
      flex-shrink: 0;
    }

    .try-btn.loading {
      opacity: .7;
      pointer-events: none;
    }

    /* Status */
    .demo-status {
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 17px;
    }

    .demo-status.ok {
      color: var(--green);
    }

    .demo-status.err {
      color: var(--red);
    }

    .s-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
      display: none;
    }

    /* ── Trust pills & stats ── */
    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      justify-content: center;
      margin-top: 28px;
    }

    .proof-pill {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
  font-family: "Inter-SemiBold";
      color: var(--text2);
      background: #fff;
      border: 1px solid var(--border);
      padding: 6px 13px;
      border-radius: 100px;
      box-shadow: 0 1px 6px rgba(29, 40, 120, .05);
    }

    .proof-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }

    .pi-n {
      background: var(--navy-lt);
    }

    .pi-o {
      background: var(--orange-lt);
    }

    .hero-stats {
      display: inline-flex;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--sh-sm);
      margin-top: 40px;
    }

    .hstat {
      padding: 18px 30px;
      border-right: 1px solid var(--border);
      text-align: center;
    }

    .hstat:last-child {
      border-right: none;
    }

    .hstat-val {
      font-family: var(--display);
      font-size: 22px;
  font-family: "Inter-Bold";
      color: var(--navy);
      line-height: 1;
      margin-bottom: 4px;
    }

    .hstat-lbl {
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 500;
    }

    /* ════════════════════════════════════════
   USE CASES
════════════════════════════════════════ */
    .uc-section {
      padding: 80px 0;
      background: var(--bg2);
      border-top: 1px solid var(--border);
    }

    .uc-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 28px;
      margin-bottom: 32px;
    }

    .uc-tab {
      padding: 8px 18px;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 13px;
  font-family: "Inter-SemiBold";
      cursor: pointer;
      border: 1.5px solid var(--border2);
      background: #fff;
      color: var(--text2);
      transition: all .18s;
    }

    .uc-tab:hover {
      border-color: var(--navy-mid);
      color: var(--navy);
    }

    .uc-tab.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
      box-shadow: 0 3px 14px rgba(29, 40, 120, .2);
    }

    .uc-pane {
      display: none;
    }

    .uc-pane.active {
      display: grid;
	   display: block;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      animation: fadeUp .3s ease both;
    }
	
	.uc-card-slider .owl-stage{display:flex;}
	.uc-card-slider .owl-item{display:flex;flex-direction:column;}


.uc-card-slider .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff !important;
    border: 0.5px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(29, 40, 120, 0.12);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.uc-card-slider .owl-nav button span {
	font-size: 14px;
	position: relative;
	top: 0px;
	color:#1d2878;
}
.uc-card-slider .owl-nav button:focus {
	outline: none;
}
.uc-card-slider .owl-nav button.owl-prev{left: 5px;}
.uc-card-slider .owl-nav button.owl-prev.disabled {
	border-color:#272a42 !important;
	opacity:0;
}
.uc-card-slider .owl-nav button.owl-prev.disabled span {
	color:#272a42;
}
.uc-card-slider .owl-nav button.owl-next{right: 5px;}
.uc-card-slider .owl-nav button.owl-next.disabled {
	border-color:#272a42 !important;
	opacity:0;
}
.uc-card-slider .owl-nav button.owl-next.disabled span {
	color:#272a42;
}
.uc-card-slider .owl-nav button:hover {
	background: #070a20 !important;
	border-color:#070a20 !important;
}
.uc-card-slider .owl-nav button:hover span {
	color:#fff;
}


	
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

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

    .uc-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: all .22s;
    height: 100%;
    display: flex;
    /* flex: 1 0 auto; */
    flex-direction: column;
    }

    .uc-card:hover {
      border-color: var(--navy-mid);
      box-shadow: var(--sh-md);
      transform: translateY(-3px);
    }

    .uc-vis {
    /* height: 165px; */
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 30px 20px 0px;
    }

    .uc-vis.v1 {
      background: linear-gradient(145deg, var(--navy-lt), #d4d8f4);
    }

    .uc-vis.v2 {
      background: linear-gradient(145deg, var(--orange-lt), var(--orange-md));
    }

    .uc-vis.v3 {
      background: linear-gradient(145deg, var(--green-lt), #b2f5cc);
    }

    .mini {
    background: #f5f5f5;
    color: #000;
    border-radius: 10px;
    /* box-shadow: var(--sh-md); */
    padding: 12px 14px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    }
	.mini.v1 {
      background: linear-gradient(145deg, var(--navy-lt), #d4d8f4);
    }

    .mini.v2 {
      background: linear-gradient(145deg, var(--orange-lt), var(--orange-md));
    }

    .mini.v3 {
      background: linear-gradient(145deg, var(--green-lt), #b2f5cc);
    }
	.mini.v4 {
      background: linear-gradient(145deg, var(--navy-lt), #d4d8f4);
    }

    .mini.v5 {
      background: linear-gradient(145deg, var(--orange-lt), var(--orange-md));
    }

    .mini.v6 {
      background: linear-gradient(145deg, var(--green-lt), #b2f5cc);
    }

    .mini-ttl {
      font-family: var(--display);
      font-size: 11px;
  font-family: "Inter-Bold";
      color: var(--text);
      margin-bottom: 8px;
    }

    .mini-bar {
      height: 6px;
      border-radius: 3px;
      background: var(--border);
      margin-bottom: 5px;
      overflow: hidden;
    }

    .mini-fill {
      height: 100%;
      border-radius: 3px;
      background: var(--navy);
    }

    .mini-num {
      font-family: var(--display);
      font-size: 18px;
  font-family: "Inter-Bold";
      color: var(--navy);
      margin-top: 6px;
    }

    .mini-sub {
      font-size: 9px;
      color: var(--muted);
    }

    .mini-badge {
      display: inline-block;
      background: var(--navy);
      color: #fff;
      font-size: 9px;
  font-family: "Inter-Bold";
      padding: 2px 8px;
      border-radius: 100px;
      margin-top: 5px;
    }

    .mini-badge.o {
      background: var(--orange);
    }

    .mini-badge.g {
      background: var(--green);
    }

    .uc-body {
      padding: 18px 20px 22px;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;	  
    }

    .uc-ttl {
      font-family: var(--display);
      font-size: 17px;
  font-family: "Inter-Bold";
      color: var(--text);
      margin-bottom: 6px;
      letter-spacing: -.015em;
    }

    .uc-desc {
     font-size: 13px;
    color: var(--text2);
    line-height: 1.65;
    margin-bottom: 14px;
    /* flex: 1; */
    flex-grow: 1;
    }

    .uc-metrics {
      display: flex;
      gap: 20px;
    }

    .uc-m strong {
      display: block;
      font-family: var(--display);
      font-size: 20px;
  font-family: "Inter-Bold";
      color: var(--navy);
    }

    .uc-m span {
    font-size: 11px;
    line-height: 15px;
    color: var(--muted);
    display: block;
    min-height: 32px;
    }

    .uc-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .uc-tag {
      font-size: 11.5px;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 100px;
      background: var(--bg2);
      border: 1px solid var(--border2);
      color: var(--text2);
    }

    /* ════════════════════════════════════════
   FEATURES
════════════════════════════════════════ */
    .feat-section {
      padding: 80px 0;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    .feat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }

    .feat-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--sh-sm);
      transition: all .22s;
    }

    .feat-card:hover {
      border-color: var(--navy-mid);
      box-shadow: var(--sh-md);
      transform: translateY(-3px);
    }

    .feat-vis {
      height: 158px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feat-vis.fv1 {
      background: linear-gradient(145deg, var(--navy-lt), #d0d4f2);
    }

    .feat-vis.fv2 {
      background: linear-gradient(145deg, var(--orange-lt), var(--orange-md));
    }

    .feat-vis.fv3 {
      background: linear-gradient(145deg, var(--green-lt), #b6f5cc);
    }

    .feat-vis.fv4 {
      background: linear-gradient(145deg, #e8f4ff, #c8e3ff);
    }

    .feat-vis.fv5 {
      background: linear-gradient(145deg, #f0f9ff, #bae6fd);
    }

    .feat-vis.fv6 {
      background: linear-gradient(145deg, #fdf4ff, #e8cffc);
    }

    /* Mockups */
    .mock-phone {
      background: #fff;
      border-radius: 12px;
      box-shadow: var(--sh-lg);
      padding: 12px 14px;
      width: 128px;
    }

    .mock-ph-av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--navy-lt);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin: 0 auto 6px;
    }

    .mock-ph-name {
      font-family: var(--display);
      font-size: 11px;
  font-family: "Inter-Bold";
      color: var(--text);
      text-align: center;
      margin-bottom: 3px;
    }

    .mock-ph-st {
      font-size: 9px;
      color: var(--green);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-bottom: 10px;
    }

    .mock-ph-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--green);
    }

    .mock-ph-btns {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .mock-ph-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }

    .ph-red {
      background: var(--red-lt);
    }

    .ph-grn {
      background: var(--green-lt);
    }

    .mock-web {
      background: #fff;
      border-radius: 10px;
      box-shadow: var(--sh-md);
      padding: 10px;
      width: 130px;
    }

    .mw-url {
      height: 7px;
      border-radius: 4px;
      background: var(--border);
      margin-bottom: 8px;
    }

    .mw-row {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      align-items: center;
    }

    .mw-av {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: var(--navy-lt);
      flex-shrink: 0;
    }

    .mw-ln {
      flex: 1;
      height: 5px;
      border-radius: 3px;
      background: var(--border);
    }

    .mw-chat {
      background: var(--navy);
      border-radius: 8px 8px 0 8px;
      padding: 5px 8px;
      text-align: right;
      margin-top: 6px;
    }

    .mw-chat span {
      font-size: 8px;
      color: #fff;
      font-weight: 500;
    }

    .mock-bars {
      display: flex;
      gap: 5px;
      align-items: flex-end;
      height: 58px;
      padding: 0 4px;
    }

    .mb {
      flex: 1;
      border-radius: 3px 3px 0 0;
    }

    .mb.lo {
      height: 55%;
      background: var(--border2);
    }

    .mb.md {
      height: 72%;
      background: var(--border2);
    }

    .mb.hi {
      height: 90%;
      background: var(--navy);
    }

    .mb.ml {
      height: 65%;
      background: var(--border2);
    }

    .mb.mh {
      height: 80%;
      background: var(--navy);
    }

    .mb.xs {
      height: 42%;
      background: var(--border2);
    }

    .mock-crm {
      background: #fff;
      border-radius: 10px;
      box-shadow: var(--sh-md);
      padding: 10px 12px;
      width: 130px;
    }

    .mc-hd {
      font-size: 8px;
  font-family: "Inter-Bold";
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 8px;
    }

    .mc-row {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 4px 0;
      border-bottom: 1px solid var(--border);
    }

    .mc-row:last-child {
      border-bottom: none;
    }

    .mc-av {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--navy-lt);
    }

    .mc-ln {
      flex: 1;
      height: 5px;
      background: var(--border);
      border-radius: 3px;
    }

    .mc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }

    .dg {
      background: var(--green);
    }

    .do {
      background: var(--orange);
    }

    .mock-tf {
      background: #fff;
      border-radius: 10px;
      box-shadow: var(--sh-md);
      padding: 12px;
      width: 130px;
    }

    .mt-hd {
      font-size: 8px;
  font-family: "Inter-Bold";
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 8px;
    }

    .mt-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .mt-av {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .mt-ai {
      background: var(--navy-lt);
    }

    .mt-hu {
      background: var(--orange-lt);
    }

    .mt-ar {
      color: var(--navy);
      font-size: 16px;
  font-family: "Inter-Bold";
    }

    .mt-prog {
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      margin-top: 8px;
      overflow: hidden;
    }

    .mt-fill {
      height: 100%;
      width: 58%;
      background: linear-gradient(90deg, var(--navy), var(--orange));
      border-radius: 2px;
    }

    .mock-ana {
      background: #fff;
      border-radius: 10px;
      box-shadow: var(--sh-md);
      padding: 10px 12px;
      width: 130px;
    }

    .ma-hd {
      font-size: 8px;
  font-family: "Inter-Bold";
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 8px;
    }

    .ma-row {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 5px;
    }

    .ma-lb {
      font-size: 8px;
      color: var(--text2);
      width: 32px;
      flex-shrink: 0;
    }

    .ma-tr {
      flex: 1;
      height: 5px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }

    .ma-fl {
      height: 100%;
      background: var(--navy);
      border-radius: 3px;
    }

    .ma-pc {
      font-size: 8px;
      color: var(--text2);
      width: 22px;
      text-align: right;
    }

    .feat-body {
      padding: 18px 20px 22px;
    }

    .feat-ttl {
      font-family: var(--display);
      font-size: 16.5px;
  font-family: "Inter-Bold";
      color: var(--text);
      margin-bottom: 6px;
      letter-spacing: -.015em;
    }

    .feat-desc {
      font-size: 13px;
      color: var(--text2);
      line-height: 1.65;
    }

    /* ════════════════════════════════════════
   SHOWCASE
════════════════════════════════════════ */
    .showcase-sec {
      padding: 80px 0;
      background: var(--bg2);
      border-top: 1px solid var(--border);
    }

    .showcase-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--bg3);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--sh-md);
    }

    .sc-left {
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-height: 380px;
      background: linear-gradient(145deg, var(--bg2), var(--navy-lt));
    }

    .dash {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--sh-lg);
      width: 260px;
      overflow: hidden;
      border: 1.5px solid var(--border);
    }

    .dash-top {
      background: var(--navy);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dd {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .dd.r {
      background: #FC8181;
    }

    .dd.y {
      background: #FBD38D;
    }

    .dd.g {
      background: #68D391;
    }

    .dash-body {
      padding: 13px;
    }

    .dash-row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 9px;
    }

    .dk {
      background: var(--bg2);
      border-radius: 8px;
      padding: 8px 10px;
    }

    .dk-v {
      font-family: var(--display);
      font-size: 17px;
  font-family: "Inter-Bold";
      color: var(--navy);
      line-height: 1;
    }

    .dk-l {
      font-size: 8.5px;
      color: var(--muted);
      margin-top: 2px;
    }

    .dk-u {
      font-size: 8.5px;
      color: var(--green);
  font-family: "Inter-SemiBold";
      margin-top: 2px;
    }

    .dash-chart {
      background: var(--bg2);
      border-radius: 8px;
      padding: 9px 10px;
      margin-bottom: 8px;
    }

    .dash-ct {
      font-size: 8px;
  font-family: "Inter-Bold";
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 8px;
    }

    .dash-bars {
      display: flex;
      gap: 4px;
      align-items: flex-end;
      height: 40px;
    }

    .db {
      flex: 1;
      border-radius: 2px 2px 0 0;
      background: var(--border2);
    }

    .db.hi {
      background: var(--navy);
    }

    .dash-st {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 8px;
      background: var(--green-lt);
      border-radius: 7px;
      font-size: 9px;
      color: var(--green);
  font-family: "Inter-SemiBold";
    }

    .dash-st-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: blink 2s infinite;
    }

    .sc-float {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--navy);
      color: #fff;
      border-radius: 9px;
      padding: 8px 13px;
      font-size: 11px;
  font-family: "Inter-SemiBold";
      box-shadow: var(--sh-md);
    }

    .sc-float small {
      display: block;
      font-size: 9px;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 2px;
      font-weight: 400;
    }

    .sc-right {
      padding: 44px 42px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .sc-right .tag-label {
      margin-bottom: 14px;
    }

    .sc-quote {
      font-family: var(--display);
      font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-family: "Inter-Bold";
      line-height: 1.2;
      letter-spacing: -.02em;
      color: var(--text);
      margin-bottom: 20px;
    }

    .sc-list {
      list-style: none;
      margin-bottom: 28px;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .sc-list li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 13.5px;
      color: var(--text2);
      line-height: 1.55;
    }

    .sc-chk {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      font-size: 10px;
  font-family: "Inter-Bold";
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
      font-family: var(--display);
    }

    .sc-btns {
      display: flex;
      gap: 10px;
    }

    /* ════════════════════════════════════════
   AGENT SECTION
════════════════════════════════════════ */
    .agent-sec {
      padding: 80px 0;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    .agent-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 28px;
      align-items: start;
      margin-top: 48px;
    }

    .agent-cats {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .agent-cat {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 15px;
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      background: #fff;
      cursor: pointer;
      transition: all .18s;
    }

    .agent-cat:hover {
      border-color: var(--navy-mid);
      background: var(--navy-lt);
    }

    .agent-cat.active {
      border-color: var(--navy);
      background: var(--navy-lt);
    }

    .agent-cat-ic {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--bg3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      transition: background .18s;
    }

    .agent-cat.active .agent-cat-ic {
      background: var(--navy-mid);
    }

    .agent-cat-nm {
      font-family: var(--display);
      font-size: 14px;
  font-family: "Inter-Bold";
      color: var(--text2);
      letter-spacing: -.01em;
      transition: color .18s;
    }

    .agent-cat.active .agent-cat-nm {
      color: var(--navy);
    }

    .agent-panel {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 36px;
      box-shadow: var(--sh-md);
      min-height: 240px;
    }

    .agent-pane {
      display: none;
    }

    .agent-pane.active {
      display: flex;
      gap: 26px;
      align-items: flex-start;
      animation: fadeUp .25s ease both;
    }

    .ap-left {
      flex: 1;
    }

    .ap-title {
      font-family: var(--display);
      font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-family: "Inter-Bold";
      color: var(--text);
      letter-spacing: -.02em;
      margin-bottom: 8px;
    }

    .ap-title .o {
      color: var(--orange);
    }

    .ap-sub {
      font-size: 13.5px;
      color: var(--text2);
      line-height: 1.65;
      margin-bottom: 22px;
      max-width: 380px;
    }

    .ap-cta {
      display: flex;
      gap: 9px;
      align-items: center;
    }

    .ap-inp {
      flex: 1;
      padding: 10px 14px;
      border: 1.5px solid var(--border2);
      border-radius: 9px;
      font-family: var(--font);
      font-size: 13.5px;
      color: var(--text);
      background: var(--bg2);
      outline: none;
      transition: all .2s;
    }

    .ap-inp:focus {
      border-color: var(--navy);
      background: #fff;
      box-shadow: 0 0 0 3px var(--navy-lt);
    }

    .ap-inp::placeholder {
      color: #bbbfce;
    }

    .ap-right {
      width: 185px;
      flex-shrink: 0;
      background: var(--bg2);
      border-radius: var(--radius);
      padding: 16px;
      border: 1px solid var(--border);
      text-align: center;
    }

    .ap-illus {
      font-size: 44px;
      margin-bottom: 8px;
    }

    .ap-quote {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.6;
      font-style: italic;
    }

    /* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
    .testi-sec {
      padding: 80px 0;
      background: var(--bg2);
      border-top: 1px solid var(--border);
    }

    .testi-layout {
      display: grid;
      grid-template-columns: 1fr 305px;
      gap: 26px;
      align-items: start;
      margin-top: 48px;
    }

    .testi-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      box-shadow: var(--sh-sm);
      position: relative;
      overflow: hidden;
    }

    .testi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 28px;
      right: 28px;
      height: 3px;
      background: linear-gradient(90deg, var(--navy), var(--orange));
      border-radius: 0 0 4px 4px;
    }

    .testi-chips {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .testi-chip {
      font-size: 12px;
  font-family: "Inter-SemiBold";
      padding: 4px 12px;
      border-radius: 100px;
      border: 1.5px solid var(--border2);
      color: var(--text2);
      background: #fff;
    }

    .testi-chip.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .testi-q-icon {
      font-family: var(--display);
      font-size: 36px;
      color: var(--navy-mid);
      line-height: 1;
      margin-bottom: 10px;
    }

    .testi-text {
      font-size: 14.5px;
      color: var(--text);
      line-height: 1.72;
      margin-bottom: 22px;
    }

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

    .testi-av {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--navy-lt);
      border: 2px solid var(--navy-mid);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
    }

    .testi-name {
      font-family: var(--display);
      font-size: 14.5px;
  font-family: "Inter-Bold";
      color: var(--text);
    }

    .testi-role {
      font-size: 12px;
      color: var(--muted);
    }

    .testi-ctrl {
      display: flex;
      gap: 8px;
      margin-top: 20px;
      align-items: center;
    }

    .testi-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1.5px solid var(--border2);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      transition: all .18s;
    }

    .testi-btn:hover {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .testi-dots {
      display: flex;
      gap: 5px;
      align-items: center;
      margin-left: 8px;
    }

    .testi-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--border2);
      cursor: pointer;
      transition: all .2s;
    }

    .testi-dot.active {
      width: 20px;
      border-radius: 4px;
      background: var(--navy);
    }

    .company-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--sh-sm);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .company-logo-box {
      background: var(--bg2);
      border-radius: var(--radius);
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
    }

    .company-nm {
      font-family: var(--display);
      font-size: 1.75rem;
  font-family: "Inter-Bold";
      color: var(--text2);
      letter-spacing: -.025em;
    }

    .impact-box {
      background: var(--bg2);
      border-radius: var(--radius);
      padding: 16px;
      border: 1px solid var(--border);
    }

    .impact-title {
      font-size: 10px;
  font-family: "Inter-Bold";
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 12px;
    }

    .impact-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .impact-row:last-child {
      margin-bottom: 0;
    }

    .impact-num {
      font-family: var(--display);
      font-size: 20px;
  font-family: "Inter-Bold";
      color: var(--navy);
      line-height: 1;
      min-width: 46px;
    }

    .impact-lbl {
      font-size: 12px;
      color: var(--text2);
    }

    /* ════════════════════════════════════════
   INTEGRATIONS
════════════════════════════════════════ */
    .int-sec {
      padding: 80px 0;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    .int-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 44px;
    }

    .int-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all .18s;
      box-shadow: 0 1px 4px rgba(29, 40, 120, .05);
    }

    .int-card:hover {
      border-color: var(--navy-mid);
      box-shadow: var(--sh-sm);
      transform: translateY(-2px);
    }

    .int-icon {
    width: 38px;
    height: 38px;
    /* border-radius: 9px; */
    /* background: var(--bg2); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    /* border: 1px solid var(--border);*/
    }

    .int-name {
      font-family: var(--display);
      font-size: 13.5px;
  font-family: "Inter-Bold";
      color: var(--text);
      line-height: 1.2;
    }

    .int-desc {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* ════════════════════════════════════════
   CTA
════════════════════════════════════════ */
    .cta-sec {
      padding: 80px 0;
      background: linear-gradient(135deg, var(--navy) 0%, #1e2c8a 100%);
      position: relative;
      overflow: hidden;
    }

    .cta-sec::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(rgba(243, 92, 37, .12), transparent 70%);
      pointer-events: none;
    }

    .cta-sec::after {
      content: '';
      position: absolute;
      bottom: -60px;
      left: -60px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(rgba(255, 255, 255, .04), transparent 70%);
      pointer-events: none;
    }

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

    .cta-title {
      font-family: var(--display);
      font-size: clamp(1.9rem, 4vw, 3rem);
  font-family: "Inter-Bold";
      color: #fff;
      line-height: 1.08;
      letter-spacing: -.025em;
      margin-bottom: 12px;
    }

    .cta-title .o {
      color: var(--orange);
    }

    .cta-sub {
      font-size: 15px;
      color: rgba(255, 255, 255, .6);
      max-width: 460px;
      margin: 0 auto 32px;
      line-height: 1.7;
    }

    .cta-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-cta-w {
      background: #fff;
      color: var(--navy);
      padding: 13px 30px;
      font-family: var(--display);
      font-size: 15px;
  font-family: "Inter-Bold";
      border-radius: 9px;
      border: none;
      cursor: pointer;
      transition: all .2s;
      letter-spacing: -.01em;
    }

    .btn-cta-w:hover {
      background: var(--bg2);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    }

    .btn-cta-ol {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .3);
      padding: 12px 28px;
      font-family: var(--font);
      font-size: 15px;
  font-family: "Inter-SemiBold";
      border-radius: 9px;
      cursor: pointer;
      transition: all .2s;
    }

    .btn-cta-ol:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .55);
    }

 
    /* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
    .toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: var(--navy);
      color: #fff;
      font-size: 13px;
  font-family: "Inter-SemiBold";
      padding: 10px 22px;
      border-radius: 100px;
      box-shadow: 0 6px 24px rgba(29, 40, 120, .35);
      opacity: 0;
      transition: all .25s;
      white-space: nowrap;
      z-index: 999;
      pointer-events: none;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
    @media(max-width:1060px) {
      .uc-pane.active {
        grid-template-columns: repeat(2, 1fr);
      }

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

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

      .showcase-card {
        grid-template-columns: 1fr;
      }

      .sc-left {
        min-height: 260px;
      }

      .testi-layout {
        grid-template-columns: 1fr;
      }

      .agent-layout {
        grid-template-columns: 1fr;
      }

      .agent-cats {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .agent-cat {
        flex: 1;
        min-width: 120px;
      }
    }

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

      .uc-pane.active {
        grid-template-columns: 1fr;
      }

      .feat-grid {
        grid-template-columns: 1fr;
      }

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

      .hero-stats {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
      }

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

      .hstat:last-child {
        border-bottom: none;
      }

      .agent-pane.active {
        flex-direction: column;
      }

      .ap-right {
        width: 100%;
      }

      .sc-right {
        padding: 28px 22px;
      }

      .demo-widget {
        min-width: unset;
      }
    }

    @media(max-width:520px) {
      .container {
        padding: 0 16px;
      }

      .try-btn {
        border-radius: 0 0 8px 8px;
        width: 100%;
        justify-content: center;
        padding: 12px;
      }

      .demo-row {
        flex-wrap: wrap;
      }
    }