/* ═══ TOKENS & RESET ═══ */
  *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
  :root {
    --ink:        #0A0A0F;
    --ink-60:     rgba(10,10,15,0.6);
    --ink-20:     rgba(10,10,15,0.12);
    --paper:      #F5F3EE;
    --paper-dark: #ECEAE3;
    --accent:     #1A1AFF;
    --accent-lt:  #E8E8FF;
    --teal:       #00B896;
    --wa:         #25D366;   /* WhatsApp green */
    --wa-dk:      #128C7E;   /* WhatsApp dark green */
    --wa-lt:      #E8FFF1;   /* WhatsApp light green */
    --wa-chat:    #ECE5DD;   /* WhatsApp chat background */
    --font-d: 'Syne', sans-serif;
    --font-b: 'DM Sans', sans-serif;
  }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font-b); background: var(--paper); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

  /* ═══ NAV ═══ */
   /* .site-header { position: fixed; top:0; left:0; right:0; z-index:200; background:#fff; border-bottom:1px solid var(--ink-20); } */
  /* .nav-top { display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:68px; gap:32px; }
  .nav-logo { font-family:var(--font-d); font-weight:800; font-size:22px; letter-spacing:-0.5px; color:var(--ink); text-decoration:none; flex-shrink:0; display:flex; align-items:center; gap:6px; } */

.site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
       /* background: #f3f4f6; */
    background: var(--paper);   
    transition: all .35s ease;
}

.site-header.scrolled{
    /* background: #ffffff; */
    /* background: #fff; */
    background-color: white;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
  .nav-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 48px;
    height:72px;
    gap:32px;
}
  .nav-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}

.nav-logo-image{
    display:block;
    width:auto;
    height:50px;
    max-width:180px;
    object-fit:contain;
}

  .nav-center { display:flex; align-items:center; list-style:none; flex:1; justify-content:center; }
  .nav-item { position:relative; }
  .nav-item > a, .nav-item > button { display:flex; align-items:center; gap:4px; font-family:var(--font-b); font-size:14px; font-weight:400; color:#333; background:none; border:none; padding:0 16px; text-decoration:none; cursor:pointer; transition:color 0.15s; white-space:nowrap; line-height:68px; height:68px; border-bottom:2px solid transparent; }
  .nav-item > a:hover, .nav-item > button:hover { color:var(--accent); }
  .nav-item.open > button { color:var(--accent); border-bottom-color:var(--accent); }
  .nav-item > button svg { transition:transform 0.2s; }
  .nav-item.open > button svg { transform:rotate(180deg); }
  .nav-chev { width:12px; height:12px; color:#888; flex-shrink:0; }
  .nav-item > a.active { color:var(--cp); border-bottom-color:var(--cp); }
  .nav-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .nav-btn-login { font-size:14px; font-weight:400; color:#333; text-decoration:none; padding:8px 16px; transition:color 0.15s; }
  .nav-btn-login:hover { color:var(--accent); }
  .nav-btn-demo { display:inline-flex; align-items:center; font-family:var(--font-b); font-size:14px; font-weight:600; color:var(--accent); border:2px solid var(--accent); padding:8px 22px; border-radius:6px; text-decoration:none; background:transparent; cursor:pointer; transition:background 0.18s,color 0.18s; white-space:nowrap; }
  .nav-btn-demo:hover { background:var(--accent); color:#fff; }

  
  .mega-wrap { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:400; padding-top:6px; }
  .mega-wrap.wide { left:0; transform:none; }
  .mega-wrap.open { display:block; }
  .mega-panel { background:#fff; border:1px solid var(--ink-20); border-radius:14px; box-shadow:0 8px 48px rgba(10,10,15,0.12); padding:10px; display:flex; animation:menuFade 0.15s ease; }
  @keyframes menuFade { from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)} }
  .mega-col { flex:1; padding:6px; min-width:190px; }
  .mega-col-title { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#aaa; padding:6px 10px 8px; }
  .mega-item { display:flex; align-items:flex-start; gap:11px; padding:10px; border-radius:9px; text-decoration:none; transition:background 0.13s; margin-bottom:1px; }
  .mega-item:hover { background:var(--paper); }
  .mega-item:hover .mega-item-title { color:var(--accent); }
  .mega-icon { width:36px; height:36px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; }
  .mega-item-title { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:2px; transition:color 0.13s; }
  .mega-item-desc { font-size:11px; color:#888; line-height:1.45; }
  .mega-divider { width:1px; background:var(--ink-20); margin:6px 2px; flex-shrink:0; }
  .mega-cta-col { min-width:200px; padding:6px; }
  .mega-cta-card { background:var(--cp-lt); border-radius:10px; padding:18px 16px; border:1px solid rgba(108,58,255,0.15); }
  .mega-cta-label { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cp); margin-bottom:8px; }
  .mega-cta-title { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px; line-height:1.3; }
  .mega-cta-desc { font-size:11px; color:#666; line-height:1.55; margin-bottom:14px; }
  .mega-cta-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--cp); text-decoration:none; }
  .nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }

  /* mega menu */
  .mega-wrap { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:400; padding-top:6px; }
  .mega-wrap.wide { left:0; transform:none; }
  .mega-wrap.open { display:block; }
  .mega-panel { background:#fff; border:1px solid var(--ink-20); border-radius:14px; box-shadow:0 8px 48px rgba(10,10,15,.12); padding:10px; display:flex; animation:menuFade .15s ease; }
  @keyframes menuFade { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
  .mega-col { flex:1; padding:6px; min-width:190px; }
  .mega-col-title { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#aaa; padding:6px 10px 8px; }
  .mega-item { display:flex; align-items:flex-start; gap:11px; padding:10px; border-radius:9px; text-decoration:none; transition:background .13s; margin-bottom:1px; }
  .mega-item:hover { background:var(--paper); }
  .mega-item:hover .mega-item-title { color:var(--wa-dk); }
  .mega-icon { width:36px; height:36px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; }
  .mega-item-title { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:2px; transition:color .13s; }
  .mega-item-desc { font-size:11px; color:#888; line-height:1.45; }
  .mega-divider { width:1px; background:var(--ink-20); margin:6px 2px; flex-shrink:0; }
  .mega-cta-col { min-width:190px; padding:6px; }
  .mega-cta-card { background:var(--wa-lt); border-radius:10px; padding:18px 16px; border:1px solid rgba(37,211,102,.18); }
  .mega-cta-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--wa-dk); margin-bottom:8px; }
  .mega-cta-title { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px; line-height:1.3; }
  .mega-cta-desc { font-size:11px; color:#666; line-height:1.55; margin-bottom:14px; }
  .mega-cta-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--wa-dk); text-decoration:none; }
  .drop-wrap { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:400; padding-top:6px; }
  .drop-wrap.open { display:block; }
  .drop-panel { background:#fff; border:1px solid var(--ink-20); border-radius:12px; box-shadow:0 8px 40px rgba(10,10,15,.10); min-width:210px; padding:8px; animation:menuFade .15s ease; }
  .drop-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; text-decoration:none; font-size:13px; font-weight:400; color:#333; transition:background .13s,color .13s; }
  .drop-item:hover { background:var(--paper); color:var(--wa-dk); }
  .drop-item-icon { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
  .drop-item-text { flex:1; }
  .drop-item-sub { font-size:11px; color:#aaa; margin-top:1px; }
  .nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }

  /* mobile drawer */
  .mob-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(10,10,15,.45); backdrop-filter:blur(2px); }
  .mob-overlay.open { display:block; }
  .mob-drawer { position:fixed; top:0; right:0; bottom:0; z-index:400; width:88vw; max-width:360px; background:#fff; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
  .mob-drawer.open { transform:translateX(0); }
  .mob-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:64px; flex-shrink:0; border-bottom:1px solid var(--ink-20); }
  .mob-drawer-logo { font-family:var(--font-d); font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:6px; }
  .mob-drawer-logo .logo-icon { width:28px; height:28px; border-radius:7px; background:var(--wa); display:flex; align-items:center; justify-content:center; }
  .mob-close { background:none; border:none; cursor:pointer; color:var(--ink); padding:8px; border-radius:8px; }
  .mob-nav { flex:1; padding:12px 12px 0; }
  .mob-section-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#bbb; padding:16px 10px 8px; }
  .mob-nav-link { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-radius:9px; font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; cursor:pointer; background:none; border:none; width:100%; text-align:left; transition:background .13s; }
  .mob-nav-link:hover { background:var(--paper); }
  .mob-nav-link.open { color:var(--wa-dk); background:var(--wa-lt); }
  .mob-nav-link.open svg { transform:rotate(180deg); color:var(--wa-dk); }
  .mob-sub { display:none; padding:4px 0 4px 12px; }
  .mob-sub.open { display:block; }
  .mob-sub-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#444; text-decoration:none; transition:background .13s; }
  .mob-sub-item:hover { background:var(--paper); color:var(--wa-dk); }
  .mob-sub-icon { width:30px; height:30px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
  .mob-sub-text { font-size:13px; font-weight:500; }
  .mob-sub-desc { font-size:11px; color:#aaa; }
  .mob-divider { height:1px; background:var(--ink-20); margin:10px 8px; }
  .mob-footer { padding:16px 12px 28px; flex-shrink:0; border-top:1px solid var(--ink-20); display:flex; flex-direction:column; gap:10px; }
  .mob-btn-login { display:block; text-align:center; font-size:15px; font-weight:500; color:var(--ink); padding:13px; border-radius:9px; border:1.5px solid var(--ink-20); text-decoration:none; }
  .mob-btn-wa { display:block; text-align:center; font-size:15px; font-weight:600; color:#fff; padding:13px; border-radius:9px; background:var(--wa); text-decoration:none; }

  /* ═══ BREADCRUMB ═══ */
  .page-container{
    max-width:1440px;   /* or 1320px if that's what you use across the site */
    margin:0 auto;
}
  .breadcrumb {  padding:88px 24px 0 48px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-60); }

  .breadcrumb a { color:var(--ink-60); text-decoration:none; transition:color .15s; }
  .breadcrumb a:hover { color:var(--wa-dk); }
  .breadcrumb span { color:var(--wa-dk); font-weight:500; }
  .breadcrumb svg { width:12px; height:12px; color:var(--ink-20); }
  


  /* ═══ HERO ═══ */
 .wa-hero{
    padding:28px 48px 80px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
    overflow:hidden;
}

/* Background Grid */
.hero-bg-grid{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:
        linear-gradient(var(--ink-20) 1px,transparent 1px),
        linear-gradient(90deg,var(--ink-20) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(
        ellipse 80% 80% at 50% 50%,
        black 30%,
        transparent 100%
    );
}

/* Left Content */
.wa-hero-left{
    position:relative;
    z-index:1;
}

/* Badge */
.wa-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    margin-bottom:24px;
    border-radius:999px;
    background:var(--wa-lt);
    border:1px solid rgba(37,211,102,.25);
    color:var(--wa-dk);
    font-size:12px;
    font-weight:500;
}

.wa-badge-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--wa);
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{
        opacity:1;
        transform:scale(1);
    }
    50%{
        opacity:.5;
        transform:scale(1.3);
    }
}

/* Heading */

.wa-hero h1{
    font-family:var(--font-d);
    font-size:clamp(36px,4.5vw,58px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-2px;
    color:var(--ink);
    margin-bottom:20px;
}

.wa-hero h1 em{
    font-style:normal;
    color:var(--wa-dk);
}

/* Description */

.wa-hero-desc{
    max-width:480px;
    margin-bottom:32px;
    color:var(--ink-60);
    font-size:17px;
    font-weight:300;
    line-height:1.7;
}

/* Buttons */

.hero-actions{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:42px;
}

.btn-wa{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 28px;
    border:none;
    border-radius:8px;
    background:var(--wa);
    color:#fff;
    text-decoration:none;
    font-family:var(--font-b);
    font-size:14px;
    font-weight:600;
    transition:.25s;
}

.btn-wa:hover{
    background:var(--wa-dk);
    transform:translateY(-2px);
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 28px;
    border:1.5px solid var(--ink-20);
    border-radius:8px;
    color:var(--ink);
    text-decoration:none;
    background:#fff;
    font-family:var(--font-b);
    font-size:14px;
    font-weight:500;
    transition:.25s;
}

.btn-outline:hover{
    border-color:var(--ink);
}

/* =========================
        HERO STATS
========================= */

/* =========================
        HERO STATS
========================= */

.hero-stats{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid #e9e9e9;
}

.hero-stats > div{
    flex:1;
    text-align:center;
    position:relative;
    padding:0 22px;
}

.hero-stats > div:not(:last-child)::after{
    content:"";
    position:absolute;
    top:4px;
    right:0;
    width:1px;
    height:110px;
    background:#e5e5e5;
}

/* Numbers */

.stat-num{
    font-family:var(--font-d);
    font-size:40px;
    white-space: nowrap;
    font-weight:800;
    line-height:1;
    letter-spacing:-1.5px;
    color:#22c55e;
    margin-bottom:14px;
    position:relative;
}

/* Green underline */

.stat-num::after{
    content:"";
    display:block;
    width:40px;
    height:4px;
    border-radius:10px;
    background:#22c55e;
    margin:12px auto 0;
}

/* Labels */

.stat-label{
    margin-top:18px;
    color:#161616;
    font-size:15px;
    font-weight:600;
    line-height:1.5;
}


  /* ═══ HERO PHONE — WhatsApp UI ═══ */
  .wa-hero-right { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; }
  .wa-phone-wrap { position:relative; width:220px; }
  .wa-phone { background:#1A1A2E; border-radius:28px; padding:8px; box-shadow:0 24px 60px rgba(10,10,15,.25),0 0 0 1px rgba(255,255,255,.06); }
  .wa-screen { background:#ECE5DD; border-radius:20px; overflow:hidden; }
  .wa-status { display:flex; align-items:center; justify-content:space-between; padding:18px 12px 3px; background:#128C7E; flex-shrink:0; }
  .wa-time { font-size:10px; font-weight:600; color:#fff; font-family:var(--font-b); }
  .wa-status-icons { display:flex; align-items:center; gap:3px; }
  .wa-header { display:flex; align-items:center; gap:7px; padding:6px 10px; background:#128C7E; flex-shrink:0; }
  .wa-back { font-size:15px; color:rgba(255,255,255,.9); }
  .wa-avatar { width:28px; height:28px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:700; flex-shrink:0; font-family:var(--font-d); border:2px solid rgba(255,255,255,.3); }
  .wa-head-info { flex:1; }
  .wa-head-name { font-size:11px; font-weight:600; color:#fff; font-family:var(--font-b); }
  .wa-head-sub { font-size:8px; color:rgba(255,255,255,.7); }
  .wa-head-icons { display:flex; gap:10px; font-size:13px; color:rgba(255,255,255,.9); }
  .wa-msgs { padding:8px; display:flex; flex-direction:column; gap:6px; background:#ECE5DD; }
  .wa-date-div { text-align:center; font-size:8px; color:#667781; background:rgba(255,255,255,.65); padding:2px 8px; border-radius:10px; align-self:center; font-family:var(--font-b); }

  /* Message bubbles */
  .wa-biz { background:#fff; border-radius:0 7px 7px 7px; padding:6px 9px; max-width:86%; box-shadow:0 1px 1px rgba(0,0,0,.08); position:relative; }
  .wa-biz::before { content:''; position:absolute; top:0; left:-5px; width:0; height:0; border-top:7px solid #fff; border-left:5px solid transparent; }
  .wa-biz-text { font-size:10px; line-height:1.5; color:#111; font-family:var(--font-b); }
  .wa-time-tick { font-size:8px; color:#999; text-align:right; margin-top:2px; font-family:var(--font-b); }
  .wa-user { background:#D9FDD3; border-radius:7px 0 7px 7px; padding:6px 9px; max-width:80%; align-self:flex-end; box-shadow:0 1px 1px rgba(0,0,0,.08); position:relative; }
  .wa-user::before { content:''; position:absolute; top:0; right:-5px; width:0; height:0; border-top:7px solid #D9FDD3; border-right:5px solid transparent; }
  .wa-user-text { font-size:10px; color:#111; font-family:var(--font-b); }
  .wa-user-tick { font-size:8px; color:#53bdeb; text-align:right; margin-top:2px; font-family:var(--font-b); }

  /* List / button message */
  .wa-list-msg { background:#fff; border-radius:0 7px 7px 7px; max-width:90%; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1); }
  .wa-list-body { padding:6px 9px; }
  .wa-list-title { font-size:10px; font-weight:600; color:#111; margin-bottom:2px; font-family:var(--font-b); }
  .wa-list-sub { font-size:9px; color:#667781; font-family:var(--font-b); margin-bottom:4px; }
  .wa-list-btn { border-top:1px solid #f0f0f0; padding:6px 9px; font-size:10px; font-weight:600; color:#128C7E; text-align:center; font-family:var(--font-b); }

  /* Image message */
  .wa-img-msg { background:#fff; border-radius:0 7px 7px 7px; max-width:90%; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1); }
  .wa-img-preview { height:76px; display:flex; align-items:center; justify-content:center; font-size:26px; }
  .wa-img-caption { padding:5px 9px 4px; font-size:9px; color:#111; font-family:var(--font-b); }

  /* Quick reply chips */
  .wa-qr-row { display:flex; gap:4px; flex-wrap:wrap; align-self:flex-start; margin-top:-3px; }
  .wa-qr { background:#fff; border:1px solid #25D366; border-radius:100px; padding:3px 8px; font-size:9px; font-weight:600; color:#128C7E; font-family:var(--font-b); box-shadow:0 1px 2px rgba(0,0,0,.06); }

  /* Float badges */
  .wa-float-badge { position:absolute; top:-12px; right:-14px; background:var(--wa); color:#fff; font-size:10px; font-weight:600; padding:5px 10px; border-radius:100px; box-shadow:0 4px 14px rgba(37,211,102,.35); display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .wa-float-badge2 { position:absolute; bottom:20px; left:-18px; background:#fff; border:1px solid var(--ink-20); font-size:10px; padding:6px 10px; border-radius:9px; box-shadow:0 4px 16px rgba(10,10,15,.1); white-space:nowrap; font-family:var(--font-b); }
  .wa-float-badge2 strong { color:var(--wa-dk); }

  /* ═══ SHARED SECTION UTILS ═══ */
  .section-eyebrow { font-size:12px; font-weight:500; color:var(--wa-dk); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
  .section-title { font-family:var(--font-d); font-size:clamp(28px,3.5vw,42px); font-weight:800; letter-spacing:-1.2px; line-height:1.1; color:var(--ink); margin-bottom:48px; }
  .section-title em { font-style:normal; color:var(--wa-dk); }
  .section-desc { font-size:16px; font-weight:300; color:var(--ink-60); line-height:1.7; max-width:560px; margin-bottom:48px; }

  /* ═══ LOGOS ═══ */
.logos-section{
  padding:70px 0;
  border-top:1px solid var(--ink-20);
  border-bottom:1px solid var(--ink-20);
  overflow:hidden;
  position:relative;
}
/* .logos-label {
  font-size: 12px; font-weight: 500; color: var(--ink-60);
  letter-spacing: 0.08em; text-align: center; margin-bottom: 28px; text-transform: uppercase;
} */
.logos-label{
  font-size:13px;
  font-weight:700;
  color:var(--ink-60);
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:40px;
}
.logo-slider{
  width:100%;
  overflow:hidden;
  position:relative;
}

.logo-track{
  display:flex;
  align-items:center;
  gap:70px;
  width:max-content;
  animation:scrollLogos 40s linear infinite;
}

.logo-track img{
  height:60px;
  width:auto;
  max-width:150px;
  object-fit:contain;

  filter:grayscale(100%);
  opacity:.85;

  transition:all .3s ease;
}

.logo-track img:hover{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.08);
}


.logo-slider::before,
.logo-slider::after{
  content:"";
  position:absolute;
  top:0;
  width:120px;
  height:100%;
  z-index:2;
}

.logo-slider::before{
  left:0;
  background:linear-gradient(
    to right,
    var(--paper),
    transparent
  );
}

.logo-slider::after{
  right:0;
  background:linear-gradient(
    to left,
    var(--paper),
    transparent
  );
}
@keyframes scrollLogos{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

/* Active Product Menu */
.nav-item.open > button{
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

.nav-item.open > button .nav-chev{
    color: var(--accent);
}

.nav-item.open > button svg{
    transform: rotate(180deg);
}

  /* ═══ OPEN RATE BANNER ═══ */
  .openrate-section { background:var(--wa); padding:64px 48px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
  .openrate-card { background:rgba(0,0,0,.06); padding:32px 24px; text-align:center; }
  /* .openrate-num { font-family:var(--font-d); font-size:42px; font-weight:800; color:#fff; letter-spacing:-1.5px; line-height:1; margin-bottom:8px; } */
  .openrate-num{
    font-family:var(--font-d);
    font-size:34px;   /* changed from 42px */
    font-weight:800;
    color:#fff
  }
  .openrate-label { font-size:14px; color:rgba(255,255,255,.8); font-weight:400; line-height:1.4; }

  /* ═══ CAPABILITIES ═══ */
  .capabilities-section { padding:100px 48px; }
  .cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink-20); border-radius:16px; overflow:hidden; }
  .cap-card { background:var(--paper); padding:36px 32px; transition:background .25s; position:relative; overflow:hidden; cursor:default; }
  .cap-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--wa); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
  .cap-card:hover { background:#fff; }
  .cap-card:hover::after { transform:scaleX(1); }
  .cap-num { font-family:var(--font-d); font-size:11px; font-weight:700; color:var(--ink-60); letter-spacing:.12em; margin-bottom:20px; }
  .cap-icon { font-size:28px; margin-bottom:16px; }
  .cap-title { font-family:var(--font-d); font-size:17px; font-weight:700; letter-spacing:-.3px; margin-bottom:10px; color:var(--ink); }
  .cap-desc { font-size:13px; color:var(--ink-60); line-height:1.65; font-weight:300; }

  /* ═══ SCREENSHOTS ═══ */
  .screenshots-section { padding:100px 48px; background:var(--ink); }
  .screenshots-section .section-eyebrow { color:var(--wa); }
  .screenshots-section .section-title { color:#fff; }
  .screenshots-section .section-title em { color:var(--wa); }
  .screenshots-section .section-desc { color:rgba(255,255,255,.45); margin-bottom:56px; }
  .shots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:start; }
  .shot-wrap { display:flex; flex-direction:column; gap:20px; }

  /* Phone frame */
  .shot-phone { background:#1A1A2E; border-radius:30px; padding:10px; box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05); position:relative; }
  .shot-notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:80px; height:22px; background:#1A1A2E; border-radius:0 0 14px 14px; z-index:2; }
  .shot-screen { background:var(--wa-chat); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; }

  /* Screen status bar */
  .shot-status { display:flex; align-items:center; justify-content:space-between; padding:26px 14px 4px; background:#128C7E; flex-shrink:0; }
  .shot-time { font-size:12px; font-weight:600; color:#fff; font-family:var(--font-b); }
  .shot-icons { display:flex; align-items:center; gap:4px; }

  /* Chat header inside screenshot */
  .shot-wa-head { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#128C7E; }
  .shot-back { font-size:18px; color:rgba(255,255,255,.9); }
  .shot-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; font-family:var(--font-d); border:2px solid rgba(255,255,255,.3); flex-shrink:0; }
  .shot-head-name { font-size:12px; font-weight:600; color:#fff; font-family:var(--font-b); line-height:1.3; flex:1; }
  .shot-head-sub { font-size:9px; color:rgba(255,255,255,.7); }

  /* Messages */
  .shot-msgs { padding:10px; display:flex; flex-direction:column; gap:7px; min-height:300px; }
  .shot-date-div { text-align:center; font-size:9px; color:#667781; background:rgba(255,255,255,.65); padding:2px 8px; border-radius:10px; align-self:center; font-family:var(--font-b); }
  .shot-biz { background:#fff; border-radius:0 8px 8px 8px; padding:7px 9px; max-width:88%; box-shadow:0 1px 1px rgba(0,0,0,.08); }
  .shot-biz-text { font-size:10.5px; line-height:1.5; color:#111; font-family:var(--font-b); }
  .shot-tick { font-size:9px; color:#999; text-align:right; margin-top:2px; font-family:var(--font-b); }
  .shot-user { background:#D9FDD3; border-radius:8px 0 8px 8px; padding:7px 9px; max-width:80%; align-self:flex-end; box-shadow:0 1px 1px rgba(0,0,0,.08); }
  .shot-user-text { font-size:10.5px; color:#111; font-family:var(--font-b); }
  .shot-user-tick { font-size:9px; color:#53bdeb; text-align:right; margin-top:2px; font-family:var(--font-b); }
  .shot-img-card { background:#fff; border-radius:0 8px 8px 8px; max-width:88%; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1); }
  .shot-img-area { height:90px; display:flex; align-items:center; justify-content:center; font-size:30px; }
  .shot-img-cap { padding:5px 9px 4px; font-size:10px; color:#111; font-family:var(--font-b); }
  .shot-list-card { background:#fff; border-radius:0 8px 8px 8px; max-width:90%; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1); }
  .shot-list-body { padding:7px 9px 4px; }
  .shot-list-title { font-size:11px; font-weight:600; color:#111; font-family:var(--font-b); margin-bottom:2px; }
  .shot-list-sub { font-size:9.5px; color:#667781; font-family:var(--font-b); }
  .shot-list-btn { border-top:1px solid #f0f0f0; padding:6px; font-size:10.5px; font-weight:600; color:#128C7E; text-align:center; font-family:var(--font-b); display:flex; align-items:center; justify-content:center; gap:5px; }
  .shot-qr-row { display:flex; gap:5px; flex-wrap:wrap; align-self:flex-start; margin-top:-3px; }
  .shot-qr { background:#fff; border:1px solid var(--wa); border-radius:100px; padding:4px 9px; font-size:9.5px; font-weight:600; color:var(--wa-dk); font-family:var(--font-b); }

  /* Labels */
  .shot-label { padding:0 4px; }
  .shot-label-tag { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px; border-radius:100px; margin-bottom:8px; }
  .shot-label-title { font-family:var(--font-d); font-size:14px; font-weight:700; color:#fff; margin-bottom:5px; }
  .shot-label-desc { font-size:12px; color:rgba(255,255,255,.45); line-height:1.55; }

  /* ═══ USE CASES ═══ */
  .usecases-section { padding:100px 48px; background:var(--paper-dark); }
  .usecases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .uc-card { background:#fff; border-radius:16px; padding:28px; border:1px solid var(--ink-20); transition:border-color .2s,box-shadow .2s; }
  .uc-card:hover { border-color:var(--wa); box-shadow:0 4px 24px rgba(37,211,102,.12); }
  .uc-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
  .uc-title { font-family:var(--font-d); font-size:16px; font-weight:700; color:var(--ink); margin-bottom:8px; }
  .uc-desc { font-size:13px; color:var(--ink-60); line-height:1.65; margin-bottom:14px; }
  .uc-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .uc-tag { font-size:11px; font-weight:500; background:var(--wa-lt); color:var(--wa-dk); padding:3px 10px; border-radius:100px; }

  /* ═══ HOW IT WORKS ═══ */
.how-section{
    padding:100px 48px;
}

.steps-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--ink-20);
    border-radius:16px;
    overflow:hidden;
    margin-top:48px;
}

.step-card{
    background:#fff;
    padding:32px 24px;
    transition:.25s;
}

.step-card:hover{
    background:var(--wa-lt);
}

.step-num{
    font-family:var(--font-d);
    font-size:38px;
    font-weight:800;
    color:rgba(10,10,15,.06);
    line-height:1;
    margin-bottom:16px;
}

.step-title{
    font-family:var(--font-d);
    font-size:15px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:8px;
}

.step-desc{
    font-size:13px;
    color:var(--ink-60);
    line-height:1.65;
}

.step-tag{
    display:inline-block;
    margin-top:12px;
    font-size:11px;
    font-weight:500;
    color:var(--wa-dk);
    background:var(--wa-lt);
    padding:3px 10px;
    border-radius:100px;
}

  /* ═══ META BSP TRUST STRIP ═══ */
  .trust-section { padding:64px 48px; background:var(--ink); }
  .trust-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
  .trust-left h2 { font-family:var(--font-d); font-size:clamp(22px,2.5vw,30px); font-weight:800; letter-spacing:-.8px; color:#fff; margin-bottom:12px; }
  .trust-left p { font-size:14px; color:rgba(255,255,255,.5); max-width:440px; line-height:1.65; }
  .trust-badges { display:flex; gap:12px; flex-wrap:wrap; }
  .trust-badge { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:14px 20px; text-align:center; min-width:130px; }
  .trust-badge-icon { font-size:22px; margin-bottom:6px; }
  .trust-badge-label { font-size:11px; font-weight:500; color:rgba(255,255,255,.7); line-height:1.3; font-family:var(--font-b); }

  /* ═══ FAQ ═══ */
/* FAQ Section */


 .faq-section{
    padding:100px 48px;
    background:var(--paper-dark);
}

.faq-grid{
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:900px;
    margin:48px auto 0;
}

.faq-item{
    width:100%;
    background:#fff;
    border:1px solid var(--ink-20);
    border-radius:14px;
    overflow:hidden;
}

.faq-q{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 22px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-family:var(--font-b);
    font-size:14px;
    font-weight:500;
    color:var(--ink);
    transition:.25s;
}

.faq-q:hover{
    background:var(--paper);
}

.faq-q.open{
    background:var(--cp-lt);
    color:var(--cp);
}

.faq-q svg{
    transition:.3s;
}

.faq-q.open svg{
    transform:rotate(45deg);
    color:var(--cp);
}



.faq-a{
    max-height:0;
    overflow:hidden;
    padding:0 22px;
    font-size:13px;
    line-height:1.7;
    color:var(--ink-60);
    font-weight:300;
    transition:max-height .35s ease, padding .35s ease;
}

.faq-a.open{
    max-height:250px;
    padding:0 22px 18px;
}
@media(max-width:768px){
    .faq-grid{
        grid-template-columns:1fr;
    }
}


  /* ═══ CTA ═══ */
  .cta-section { padding:120px 48px; text-align:center; position:relative; overflow:hidden; }
  .cta-section::before { content:''; position:absolute; top:50%; left:50%; width:600px; height:600px; background:radial-gradient(circle,rgba(37,211,102,.07) 0%,transparent 70%); transform:translate(-50%,-50%); pointer-events:none; }
  .cta-section h2 { font-family:var(--font-d); font-size:clamp(32px,4.5vw,54px); font-weight:800; letter-spacing:-1.5px; color:var(--ink); max-width:700px; margin:0 auto 18px; line-height:1.1; }
  .cta-section h2 em { font-style:normal; color:var(--wa-dk); }
  .cta-section p { font-size:17px; color:var(--ink-60); margin:0 auto 36px; max-width:500px; font-weight:300; line-height:1.65; }
  .cta-actions { display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }

  /* ═══ FOOTER ═══ */
  footer { background:var(--ink); color:var(--paper); padding:64px 48px 40px; }
  
  .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .footer-brand-name { font-family:var(--font-d); font-size:22px; font-weight:800; letter-spacing:-0.5px; margin-bottom:12px; }
  .footer-brand-name span { color:var(--accent); }
  .footer-tagline { font-size:13px; opacity:0.45; line-height:1.6; max-width:260px; font-weight:300; }

  .footer-col-title { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5; margin-bottom:16px; }
  .footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-links a { font-size:13px; color:rgba(245,243,238,0.6); text-decoration:none; transition:color 0.2s; font-weight:300; }
  .footer-links a:hover { color:var(--paper); }
  .footer-bottom { display:flex; align-items:center; justify-content:space-between; font-size:12px; opacity:0.35; }
  /* .footer-social { display:flex; gap:14px; margin-top:20px; }
  .footer-social a { color:rgba(255,255,255,0.4); text-decoration:none; font-size:12px; transition:color 0.2s; }
  .footer-social a:hover { color:#fff; } */
  /* Footer Social Icons */
  /* Footer Logo */
.footer-logo-box{
    display:inline-flex;
    align-items:center;
    margin-bottom:20px;
}

.footer-logo{
    height:60px;   /* Increase from current size */
    width:auto;
    display:block;
    object-fit:contain;
}
.footer-social{
  display:flex;
  gap:12px;
  margin-top:20px; /* keep this if you want spacing below the tagline */
}

.footer-social a{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.06);
  color:var(--paper);
  text-decoration:none;
  transition:all .3s ease;
}

.footer-social a:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-3px);
}

.footer-social i{
  font-size:16px;
}


  /* ═══ RESPONSIVE ═══ */
  @media (max-width:900px) {
    .nav-top { padding:0 20px; }
    .nav-center,.nav-btn-login,.nav-btn-demo { display:none; }
    .nav-hamburger { display:flex; }
    .breadcrumb { padding:84px 20px 0; }
    .wa-hero { grid-template-columns:1fr; padding:24px 20px 60px; }
    .wa-hero-right { display:none; }
    .logos-section { padding:36px 20px; }
    .openrate-section { padding:48px 20px; grid-template-columns:repeat(2,1fr); }
    .capabilities-section,.usecases-section,.how-section,.trust-section,.faq-section,.cta-section { padding:64px 20px; }
    .screenshots-section { padding:64px 20px; }
    .cap-grid { grid-template-columns:1fr 1fr; }
    .shots-grid { grid-template-columns:repeat(2,1fr); }
    .usecases-grid { grid-template-columns:1fr 1fr; }
    .steps-row { grid-template-columns:1fr 1fr; }
    .trust-inner { flex-direction:column; }
    .faq-grid { grid-template-columns:1fr; }
    .cta-actions { flex-direction:column; }
    .cta-actions .btn-wa,.cta-actions .btn-outline { width:100%; justify-content:center; }
    footer { padding:48px 20px 32px; }
    .footer-top { grid-template-columns:1fr 1fr; gap:28px; }
    .footer-bottom { flex-direction:column; gap:6px; text-align:center; }
  }
  @media (max-width:540px) {
    .shots-grid { grid-template-columns:1fr; max-width:300px; margin:0 auto; }
    .openrate-section { grid-template-columns:1fr 1fr; }
    .cap-grid,.usecases-grid { grid-template-columns:1fr; }
    .steps-row { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr; }
    .wa-hero h1 { font-size:30px; }
  }