:root{
    /* Brand palette — kept from original site */
    --c-primary:        #4c205b;          /* deep purple */
    --c-primary-2:      #6b2d80;
    --c-primary-soft:   #edeaff;          /* light purple bg */
    --c-section-soft:   #f6f4ff;
    --c-accent-pink:    #d7366f;          /* newsletter / pink CTA */
    --c-accent-pink-2:  #b9005b;
    --c-accent-yellow:  #ffc700;
    --c-ink:            #14101a;
    --c-ink-2:          #3a3145;
    --c-muted:          #6b6377;
    --c-line:           #e8e4ef;
    --c-bg:             #ffffff;
    --c-bg-soft:        #f7f5fb;
    --c-card:           #ffffff;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;

    --shadow-sm: 0 2px 8px rgba(76,32,91,0.06);
    --shadow-md: 0 12px 32px rgba(76,32,91,0.10);
    --shadow-lg: 0 24px 64px rgba(76,32,91,0.14);

    --maxw: 1240px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    color:var(--c-ink);
    background:var(--c-bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%;height:auto;display:block}
  a{text-decoration:none;color:inherit}
  ul{list-style:none}
  button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

  /* ====================================================
     HEADER
     ==================================================== */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,0.85);
    backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .site-header.scrolled{
    border-bottom-color:var(--c-line);
    box-shadow:0 6px 24px rgba(76,32,91,0.05);
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    height:76px;
  }
  .logo{display:flex;align-items:center;gap:8px}
  .logo img{height:24px;width:auto}

  .nav{display:flex;align-items:center;gap:4px}
  .nav > li{position:relative}
  .nav a.nav-link{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 14px;border-radius:10px;
    font-size:14px;font-weight:600;color:var(--c-ink-2);
    transition:background .2s, color .2s;
  }
  .nav a.nav-link:hover{background:var(--c-section-soft);color:var(--c-primary)}
  .nav .chev{font-size:9px;opacity:.7;transition:transform .2s}
  .nav .has-dd:hover .chev{transform:rotate(180deg)}

  .has-dd::before{
    /* hover bridge so cursor can move from link to menu without it closing */
    content:"";position:absolute;top:100%;left:0;right:0;height:14px;
  }
  .dd{
    position:absolute;top:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(6px);
    background:#fff;border:1px solid var(--c-line);border-radius:16px;
    box-shadow:var(--shadow-md);
    padding:8px;width:300px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index:60;
  }
  .has-dd:hover .dd, .has-dd:focus-within .dd{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .dd a{
    display:grid;grid-template-columns:10px 1fr auto;align-items:center;
    gap:12px;padding:12px 14px;border-radius:12px;
    font-size:14px;font-weight:600;color:var(--c-ink);
    line-height:1.2;white-space:nowrap;
    transition:background .15s;
  }
  .dd a:hover{background:var(--c-section-soft);color:var(--c-primary)}
  .dd .dd-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
  .dd .dd-meta{font-size:12px;color:var(--c-muted);font-weight:500}

  .header-cta{display:flex;align-items:center;gap:10px}
  .lang{
    font-size:13px;font-weight:600;color:var(--c-ink-2);
    padding:8px 12px;border-radius:8px;
  }
  .lang:hover{background:var(--c-section-soft)}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:42px;padding:0 20px;border-radius:999px;
    font-size:14px;font-weight:600;
    transition:transform .15s ease, box-shadow .2s, background .2s, color .2s;
    white-space:nowrap;
  }
  .btn-primary{background:var(--c-primary);color:#fff}
  .btn-primary:hover{background:var(--c-primary-2);box-shadow:0 8px 20px rgba(76,32,91,0.25);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--c-ink);border:1.5px solid var(--c-line)}
  .btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary);background:#fff}
  .btn-pink{background:var(--c-accent-pink);color:#fff}
  .btn-pink:hover{background:var(--c-accent-pink-2)}
  .btn-lg{height:54px;padding:0 28px;font-size:15px}

  /* ====================================================
     HERO
     ==================================================== */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(1100px 500px at 90% 20%, #d6cdf3 0%, transparent 60%),
      radial-gradient(800px 500px at 10% 90%, #f3d2e4 0%, transparent 65%),
      linear-gradient(180deg, var(--c-primary-soft) 0%, #f6f3ff 100%);
  }
  .hero-grid{
    display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;
    padding:80px 0 96px;
  }
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;border-radius:999px;
    background:rgba(255,255,255,0.7);border:1px solid rgba(76,32,91,0.12);
    font-size:13px;font-weight:600;color:var(--c-primary);
    margin-bottom:20px;
  }
  .hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent-pink);box-shadow:0 0 0 4px rgba(215,54,111,0.18)}
  .hero h1{
    font-size:clamp(36px, 4.6vw, 60px);
    font-weight:800;letter-spacing:-0.02em;line-height:1.05;
    color:var(--c-ink);
    margin-bottom:20px;
  }
  .hero h1 .grad{
    background:linear-gradient(120deg, var(--c-primary) 0%, var(--c-accent-pink) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.lead{
    font-size:18px;color:var(--c-ink-2);max-width:520px;margin-bottom:32px;
  }
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
  .hero-meta{
    display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;
  }
  .hero-meta div{display:flex;flex-direction:column;gap:2px}
  .hero-meta strong{font-size:22px;font-weight:800;color:var(--c-primary)}
  .hero-meta span{font-size:13px;color:var(--c-muted)}

  .hero-visual{
    position:relative;
    aspect-ratio: 5 / 4;
  }
  .hero-visual .hv-card{
    position:absolute;z-index:3;background:#fff;border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    padding:14px;
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:600;
  }
  .hv-1{top:6%;left:-3%;animation:floatY 6s ease-in-out infinite}
  .hv-2{bottom:8%;right:-2%;animation:floatY 7s ease-in-out infinite reverse}
  .hv-3{top:34%;right:6%;animation:floatY 5s ease-in-out .5s infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .hv-icon{
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    color:#fff;
  }
  .hv-1 .hv-icon{background:linear-gradient(135deg,#4c205b,#6b2d80)}
  .hv-2 .hv-icon{background:linear-gradient(135deg,#d7366f,#ff5e9f)}
  .hv-3 .hv-icon{background:linear-gradient(135deg,#0079fd,#5aa3ff)}
  .hv-meta{display:flex;flex-direction:column}
  .hv-meta small{font-size:11px;font-weight:500;color:var(--c-muted)}

  .hero-img-wrap{
    position:absolute;inset:8% 4% 8% 4%;
    border-radius:var(--r-xl);
    overflow:hidden;
    background:linear-gradient(135deg,#4c205b 0%, #6b2d80 100%);
    box-shadow:var(--shadow-lg);
    display:flex;align-items:center;justify-content:center;
  }
  .hero-img-wrap::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(400px 200px at 80% 0%, rgba(255,255,255,0.18), transparent 60%),
      radial-gradient(300px 200px at 0% 100%, rgba(215,54,111,0.35), transparent 60%);
  }
  .hero-img-wrap img{
    position:relative;z-index:1;
    width:78%;height:auto;object-fit:contain;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,0.25));
  }

  /* ====================================================
     AGGREGATORS STRIP
     ==================================================== */
  .aggr{
    background:var(--c-primary);color:#fff;
    position:relative;overflow:hidden;
  }
  .aggr::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(600px 200px at 20% 50%, rgba(215,54,111,0.35), transparent 70%),
      radial-gradient(500px 200px at 90% 50%, rgba(255,199,0,0.18), transparent 70%);
  }
  .aggr-inner{
    position:relative;display:flex;align-items:center;justify-content:center;gap:18px;
    padding:18px 32px;text-align:center;
    font-size:18px;font-weight:600;letter-spacing:-0.01em;
  }
  .aggr-inner .badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.12);
    font-weight:800;color:#fff;font-size:14px;
    flex-shrink:0;
  }

  /* ====================================================
     TRUSTED / LOGOS
     ==================================================== */
  .section{padding:96px 0}
  .section-tight{padding:64px 0}
  .section-h{
    text-align:center;margin-bottom:48px;
  }
  .eyebrow{
    display:inline-block;
    font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--c-primary);
    padding:6px 12px;border-radius:999px;background:var(--c-primary-soft);
    margin-bottom:14px;
  }
  .h2{
    font-size:clamp(28px, 3.2vw, 42px);
    font-weight:800;letter-spacing:-0.02em;line-height:1.15;
    color:var(--c-ink);
  }
  .h2 .grad{
    background:linear-gradient(120deg, var(--c-primary), var(--c-accent-pink));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .section-sub{
    margin-top:14px;font-size:17px;color:var(--c-muted);
    max-width:620px;margin-left:auto;margin-right:auto;
  }

  .logos-marquee{
    --gap: 48px;
    display:flex;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .logos-marquee .track{
    display:flex;gap:var(--gap);
    animation:marquee 100s linear infinite;
    flex-shrink:0;padding-right:var(--gap);
  }
  .logos-marquee:hover .track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .logos-marquee .logo-pill{
    width:128px;height:128px;border-radius:24px;
    background:#fff;border:1px solid var(--c-line);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;padding:18px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  }
  .logos-marquee .logo-pill:hover{
    transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;
  }
  .logos-marquee .logo-pill img{max-width:100%;max-height:100%;object-fit:contain}

  .stats-row{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px;margin-top:64px;
  }
  .stat-card{
    display:flex;flex-direction:column;justify-content:center;
    background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);
    padding:28px;text-align:center;
    transition:transform .2s, box-shadow .2s;
  }
  .stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  /* Reorder children so .num always sits at the top of every card,
     regardless of the optional .stars decoration on the first card.
     This keeps the row of numbers visually aligned across cards. */
  .stat-card .num{
    order:1;
    font-size:38px;font-weight:800;letter-spacing:-0.02em;color:var(--c-primary);
    line-height:1;margin-bottom:8px;
  }
  .stat-card .lbl{order:2;font-size:14px;font-weight:600;color:var(--c-ink-2)}
  .stat-card .stars{order:3;color:var(--c-accent-yellow);font-size:16px;letter-spacing:2px;margin-top:10px;display:block}

  /* ====================================================
     ENABLE
     ==================================================== */
  .enable{
    background:var(--c-bg-soft);
    border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  }
  .enable-grid{
    display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;
  }
  .enable-grid p{
    font-size:18px;line-height:1.7;color:var(--c-ink-2);
  }

  /* ====================================================
     SOLUTIONS
     ==================================================== */
  .solutions{position:relative;overflow:hidden}
  .sol-tabs{
    display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
    margin:0 auto 48px;
    padding:6px;background:var(--c-section-soft);
    border-radius:999px;width:fit-content;
  }
  .sol-tab{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 22px;border-radius:999px;
    font-size:14px;font-weight:700;color:var(--c-ink-2);
    transition:background .25s, color .25s, box-shadow .25s;
  }
  .sol-tab .swatch{width:8px;height:8px;border-radius:50%}
  .sol-tab[data-active="true"]{
    background:#fff;color:var(--c-primary);
    box-shadow:0 4px 14px rgba(76,32,91,0.10);
  }

  .sol-stage{
    display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;
    background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);
    padding:56px;box-shadow:var(--shadow-sm);
    position:relative;overflow:hidden;
    min-height:480px;
  }
  .sol-stage::before{
    content:"";position:absolute;top:-100px;right:-100px;
    width:380px;height:380px;border-radius:50%;
    background:radial-gradient(circle, var(--bgcolor,#edeaff) 0%, transparent 70%);
    transition:background .4s;
    z-index:0;pointer-events:none;
  }
  .sol-text{position:relative;z-index:1}
  .sol-logo{height:54px;width:auto;margin-bottom:22px}
  .sol-num{
    font-family:'Inter',sans-serif;
    font-size:13px;font-weight:700;letter-spacing:0.18em;
    color:var(--c-primary);text-transform:uppercase;
    margin-bottom:14px;display:flex;align-items:center;gap:10px;
  }
  .sol-num::before{content:"";width:24px;height:2px;background:var(--c-primary)}
  .sol-headline{
    font-size:32px;font-weight:800;line-height:1.2;letter-spacing:-0.02em;
    margin-bottom:18px;color:var(--c-ink);
  }
  .sol-desc{font-size:17px;color:var(--c-ink-2);line-height:1.65;margin-bottom:28px}
  .sol-bullets{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
  .sol-bullets li{
    display:flex;align-items:center;gap:10px;
    font-size:14px;color:var(--c-ink-2);font-weight:500;
  }
  .sol-bullets svg{flex-shrink:0;color:var(--c-primary)}
  .sol-cta{display:flex;gap:12px;flex-wrap:wrap}
  .sol-illus{
    position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;
    min-height:380px;
  }
  .sol-illus img{
    max-width:100%;max-height:420px;width:auto;object-fit:contain;
    filter:drop-shadow(0 20px 30px rgba(76,32,91,0.18));
    animation:fadeUp .4s ease;
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

  /* ====================================================
     F&B NEEDS
     ==================================================== */
  .fnb{background:linear-gradient(180deg,#fff,var(--c-bg-soft))}
  .fnb-row{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
    margin-bottom:96px;
  }
  .fnb-row:last-child{margin-bottom:0}
  .fnb-row.flip .fnb-text{order:2}
  .fnb-row.flip .fnb-img{order:1}
  .fnb-text h3{
    font-size:32px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;
    color:var(--c-ink);margin-bottom:14px;
  }
  .fnb-text .fnb-sub{
    font-size:18px;font-weight:700;color:var(--c-primary);margin-bottom:14px;
  }
  .fnb-text p{font-size:17px;color:var(--c-ink-2);line-height:1.65;margin-bottom:20px}
  .fnb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .fnb-tag{
    padding:6px 14px;border-radius:999px;
    background:#fff;border:1px solid var(--c-line);
    font-size:13px;font-weight:600;color:var(--c-ink-2);
  }
  .fnb-img{
    display:flex;align-items:center;justify-content:center;
    background:var(--c-section-soft);border-radius:var(--r-xl);
    padding:48px;aspect-ratio: 4/3;
    position:relative;overflow:hidden;
  }
  .fnb-img::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 30% 30%, rgba(76,32,91,0.06), transparent 60%);
  }
  .fnb-img img{position:relative;z-index:1;max-height:100%;width:auto;max-width:90%}
  .btn-link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:14px;font-weight:700;color:var(--c-primary);
    transition:gap .2s;
  }
  .btn-link:hover{gap:10px}

  /* ====================================================
     INTEGRATIONS
     ==================================================== */
  .integ{
    background:#fff;
  }
  .integ-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
    margin-top:48px;
  }
  .integ-item{
    aspect-ratio:1;border-radius:var(--r-lg);
    background:#fff;border:0;
    box-shadow:0 1px 2px rgba(76,32,91,0.04), 0 4px 16px rgba(76,32,91,0.06);
    display:flex;align-items:center;justify-content:center;padding:14px;
    transition:transform .2s, box-shadow .2s;
  }
  .integ-item:hover{
    transform:translateY(-3px);
    box-shadow:0 2px 4px rgba(76,32,91,0.06), 0 16px 36px rgba(76,32,91,0.14);
  }
  /* Round the icon image to match the iOS-style rounded-square shape
     inside; this clips the off-white padding the source PNGs ship with
     so the corners blend cleanly into the white card. */
  .integ-item img{
    max-width:90%;max-height:90%;object-fit:contain;
    border-radius:22%;
  }

  /* ====================================================
     BLOG
     ==================================================== */
  .blog{background:var(--c-bg-soft)}
  .blog-grid{
    display:grid;grid-template-columns:1fr 1.4fr;gap:32px;
  }
  .blog-side{
    background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);
    padding:28px;
  }
  .blog-side h4{font-size:22px;font-weight:800;margin-bottom:18px;letter-spacing:-0.01em}
  .blog-list{display:flex;flex-direction:column;gap:6px}
  .blog-side-item{
    display:flex;gap:14px;align-items:center;
    padding:12px;border-radius:14px;
    transition:background .2s;cursor:pointer;
  }
  .blog-side-item:hover{background:var(--c-section-soft)}
  .blog-side-item .thumb{
    width:64px;height:64px;border-radius:12px;flex-shrink:0;
    background:linear-gradient(135deg,#d8d4ff,#f3d2e4);
    background-size:cover;background-position:center;
  }
  .blog-side-item .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
  .blog-side-item .meta .ttl{
    font-size:14px;font-weight:600;line-height:1.35;color:var(--c-ink);
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .blog-side-item .meta .dt{font-size:11px;color:var(--c-muted)}

  .blog-main{display:flex;flex-direction:column;gap:24px}
  .blog-feature{
    background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);
    overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;
    transition:transform .2s, box-shadow .2s;
  }
  .blog-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .blog-feature .img{
    background-image:url('../images/blog-card-1.png');
    background-size:cover;background-position:center;
    min-height:300px;
  }
  .blog-feature .content{padding:32px;display:flex;flex-direction:column;justify-content:center;gap:12px}
  .blog-feature .dt{font-size:12px;color:var(--c-primary);font-weight:700;letter-spacing:0.12em;text-transform:uppercase}
  .blog-feature h3{font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-0.01em}
  .blog-feature p{font-size:15px;color:var(--c-muted)}

  .blog-mini-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .blog-mini{
    background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);
    overflow:hidden;display:flex;flex-direction:column;
    transition:transform .2s, box-shadow .2s;
  }
  .blog-mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .blog-mini .img{
    background-size:cover;background-position:center;
    aspect-ratio:16/10;
  }
  .blog-mini .content{padding:18px 22px 22px;display:flex;flex-direction:column;gap:6px}
  .blog-mini .dt{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-primary)}
  .blog-mini h4{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-0.01em}

  .btn-blog-all{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:24px;height:44px;border-radius:12px;
    background:var(--c-primary);color:#fff;font-weight:700;font-size:14px;
    transition:background .2s;
  }
  .btn-blog-all:hover{background:var(--c-primary-2)}

  /* ====================================================
     EBOOK
     ==================================================== */
  .ebook{
    background:linear-gradient(135deg,#4c205b 0%, #6b2d80 60%, #b9005b 100%);
    color:#fff;position:relative;overflow:hidden;
  }
  .ebook::before, .ebook::after{
    content:"";position:absolute;border-radius:50%;
    background:rgba(255,255,255,0.06);
  }
  .ebook::before{width:520px;height:520px;top:-200px;right:-180px}
  .ebook::after{width:300px;height:300px;bottom:-120px;left:-120px}
  .ebook-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
    padding:80px 0;
  }
  .ebook h2{
    font-size:clamp(32px, 4vw, 52px);font-weight:800;letter-spacing:-0.02em;line-height:1.1;
    margin-bottom:18px;
  }
  .ebook p{font-size:17px;color:rgba(255,255,255,0.85);margin-bottom:28px;max-width:480px}
  .ebook .ebook-img{display:flex;align-items:center;justify-content:center}
  .ebook .ebook-img img{max-width:90%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,0.3))}
  .btn-white{background:#fff;color:var(--c-primary)}
  .btn-white:hover{background:var(--c-accent-yellow);color:var(--c-primary)}

  /* ====================================================
     CTA
     ==================================================== */
  .cta-band{
    background:var(--c-primary-soft);
    text-align:center;padding:96px 32px;
    position:relative;overflow:hidden;
  }
  .cta-band::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(215,54,111,0.15), transparent 60%),
      radial-gradient(600px 300px at 50% 100%, rgba(76,32,91,0.10), transparent 60%);
  }
  .cta-band-inner{position:relative}
  .cta-band h2{
    font-size:clamp(40px, 6vw, 76px);
    font-weight:900;letter-spacing:-0.03em;line-height:0.95;
    color:var(--c-primary);text-transform:uppercase;
    margin-bottom:32px;
  }
  .cta-band h2 .pink{color:var(--c-accent-pink)}

  /* ====================================================
     FOOTER
     ==================================================== */
  .footer{
    background:var(--c-primary);color:#fff;padding:64px 0 32px;
    position:relative;overflow:hidden;
  }
  .footer::before{
    content:"";position:absolute;top:-200px;right:-200px;
    width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(215,54,111,0.18), transparent 70%);
  }
  .footer-grid{
    position:relative;
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:48px;
    margin-bottom:48px;
  }
  .footer-grid h5{
    font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
    color:rgba(255,255,255,0.6);margin-bottom:18px;
  }
  .footer-brand img{height:28px;margin-bottom:18px}
  .footer-brand p{font-size:14px;color:rgba(255,255,255,0.7);max-width:280px;line-height:1.6}
  .footer-grid ul{display:flex;flex-direction:column;gap:10px}
  .footer-grid ul a{font-size:14px;color:rgba(255,255,255,0.85);transition:color .2s}
  .footer-grid ul a:hover{color:#fff}

  .newsletter{
    display:flex;gap:8px;background:rgba(255,255,255,0.08);
    padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);
  }
  .newsletter input{
    flex:1;background:transparent;border:0;outline:0;color:#fff;
    padding:0 16px;font-size:14px;font-family:inherit;
  }
  .newsletter input::placeholder{color:rgba(255,255,255,0.55)}
  .newsletter button{
    height:40px;padding:0 20px;border-radius:999px;
    background:var(--c-accent-pink);color:#fff;font-weight:700;font-size:13px;
    transition:background .2s;
  }
  .newsletter button:hover{background:#ff5e9f}
  .nl-msg{font-size:12px;color:rgba(255,255,255,0.7);min-height:18px;margin-top:8px}

  .footer-divider{
    border:0;border-top:1px solid rgba(255,255,255,0.14);
    margin:0 0 24px;
  }
  .footer-bottom{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
    font-size:13px;color:rgba(255,255,255,0.65);
  }
  .footer-bottom ul{display:flex;gap:24px}
  .footer-bottom a:hover{color:#fff}

  /* ====================================================
     RESPONSIVE
     ==================================================== */
  @media (max-width: 1024px){
    /* Hide desktop nav + the header-only language pill (drawer .lang stays) */
    .nav, .header-cta > .lang{display:none}
    .hero-grid, .enable-grid, .sol-stage, .fnb-row, .ebook-grid, .blog-grid{grid-template-columns:1fr;gap:40px}
    /* Mobile-only F&B: every block follows heading → text → image,
       regardless of the desktop .flip alternation. Selectors match the
       .fnb-row.flip specificity so they override the desktop rule. */
    .fnb-row .fnb-text,
    .fnb-row.flip .fnb-text{order:1}
    .fnb-row .fnb-img,
    .fnb-row.flip .fnb-img{order:2}
    .stats-row{grid-template-columns:1fr;gap:14px}
    .integ-grid{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .blog-feature{grid-template-columns:1fr}
    .blog-mini-row{grid-template-columns:1fr}
    .sol-stage{padding:36px 28px}
    .section{padding:64px 0}
  }

  /* Tablet — keep nav off, simplify hero */
  @media (max-width: 760px){
    html,body{overflow-x:hidden !important;max-width:100vw !important}
    body *{max-width:100vw}
    /* The marquee track must stay wider than the viewport for the
       horizontal animation to run; opt these elements out of the
       blanket max-width:100vw rule above. */
    .logos-marquee, .logos-marquee .track, .logos-marquee .logo-pill{max-width:none}
    .wrap{padding:0 20px;width:100%;max-width:100% !important;box-sizing:border-box}
    /* H1/H2 force-wrap so long words don't overflow */
    h1,h2,h3,h4,p{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}
    .section{padding:56px 0}

    /* Header */
    .header-inner{height:64px;gap:12px}
    .header-cta{gap:8px}
    .header-cta .btn{height:38px;padding:0 16px;font-size:13px}
    /* Show the burger only on mobile.
       Selector specificity (.header-cta .burger) beats the later base
       rule "..section.. .burger{display:none}" so mobile wins. */
    .header-cta .burger{display:inline-flex}

    /* Hero */
    .hero{padding:32px 0 48px;overflow:hidden}
    .hero-grid{gap:32px;grid-template-columns:1fr;width:100%;max-width:100%}
    .hero-content,.hero-visual{min-width:0;width:100%;max-width:100%}
    .hero h1{font-size:28px;line-height:1.15;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;max-width:100%}
    .hero h1 .grad{display:inline}
    .hero-actions{flex-wrap:wrap;width:100%}
    .hero-actions .btn{flex:0 1 auto;min-width:auto}
    .hero-visual{aspect-ratio:auto;max-width:100%;overflow:visible;position:relative;padding:24px 0}
    .hero-img-wrap{position:relative !important;inset:auto !important;border-radius:24px;width:100%;max-width:100%}
    .hero-img-wrap img{position:relative !important;width:100%;height:auto;z-index:1}
    .hero p.lead{font-size:16px}
    .hero-actions{flex-wrap:wrap}
    .hero-actions .btn{flex:1 1 auto;min-width:140px}
    .hero-meta{flex-wrap:wrap;gap:24px 32px;margin-top:24px}
    .hero-meta > div{min-width:90px}
    .hero-meta strong{font-size:24px}
    /* Floating "balloons" — keep them visible on mobile, sized smaller,
       layered above the laptop image (z-index:3 set globally).
       NOTE: floatY animation re-targets transform on each keyframe so
       we cannot also apply transform:scale here — instead we shrink
       the cards via font-size + padding + icon dimensions. */
    .hv-card{font-size:11px;padding:8px 10px;gap:8px;z-index:3}
    .hv-card .hv-icon{width:26px;height:26px}
    .hv-card .hv-meta small{font-size:10px}
    .hv-1{top:8px;left:0}
    .hv-2{bottom:8px;right:0}
    .hv-3{top:34%;right:0}

    /* Aggregator strip */
    .aggr{padding:12px 16px}
    .aggr-inner{font-size:13px;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px}

    /* Section headings */
    .section-h h2,.h2{font-size:28px;line-height:1.15}
    .eyebrow{font-size:11px}

    /* Trusted */
    /* Bottom gap of marquee should mirror the top gap (h2 → marquee).
       Above-marquee: section-h margin-bottom (48px) + marquee padding-top (24px) ≈ 72px.
       Override desktop's 64px margin-top so the below-marquee gap matches. */
    .stats-row{margin-top:24px;padding-top:0}
    .stat-card{padding:20px 16px}
    .stat-card .num{font-size:28px}
    .logos-marquee{padding:24px 0}
    .logo-pill{width:108px;height:64px;padding:10px}

    /* Solutions tabs — equal-width pills so all 4 fill the row evenly */
    .sol-tabs{
      max-width:100%;width:100%;
      overflow-x:auto;flex-wrap:nowrap;
      justify-content:stretch;padding:5px;gap:4px;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
    }
    .sol-tabs::-webkit-scrollbar{display:none}
    .sol-tab{
      flex:1 1 0;min-width:0;justify-content:center;
      padding:9px 8px;font-size:13px;gap:6px;white-space:nowrap;
    }
    .sol-tab .swatch{width:7px;height:7px;flex-shrink:0}

    /* Solution stage */
    .sol-stage{padding:24px 18px;min-height:auto;gap:24px}
    .sol-content h3,.sol-content h2{font-size:24px}
    .sol-img-wrap img{max-height:260px}

    /* F&B section rows stack — match the rhythm:
         paragraph ↓20 → tags ↓20 → image ↓48 → next H3
       Grid gap mirrors paragraph margin so tags-to-image equals
       text-to-tags; row margin-bottom widens the breathing room
       before the next block's heading. */
    .fnb-row{padding:0;gap:20px;margin-bottom:48px}
    .fnb-row:last-child{margin-bottom:0}
    .fnb-row .fnb-tags{margin-bottom:0}
    .fnb-text h3{font-size:22px}
    .fnb-img{padding:24px;aspect-ratio:5/4;border-radius:18px}
    .fnb-img img{max-height:240px;margin:0 auto}

    /* Blog */
    .blog-side{order:2}
    .blog-feature .img,.blog-mini .img{height:160px}
    .blog-feature h3{font-size:18px}
    .blog-mini h4{font-size:14px}
    .blog-side-item .thumb{width:72px;height:72px}
    .blog-side-item .ttl{font-size:13px}

    /* Integrations + ebook + CTA */
    .integ-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .integ-card{padding:18px 14px}
    .ebook{padding:48px 0}
    .ebook-grid{gap:24px}
    .ebook h2{font-size:28px}
    .ebook-img img{max-height:260px}
    .cta-band{padding:48px 16px}
    .cta-band h2{font-size:34px;line-height:1.1;margin-bottom:18px}
    .cta-band .btn-lg{height:48px;font-size:14px}

    /* Footer */
    .footer{padding:48px 0 24px}
    .footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
    .footer-bottom ul{flex-wrap:wrap;gap:14px}
    .footer .newsletter{max-width:100%}

    /* Sign-up modal — simpler */
    .signup-modal-card{margin:24px auto;border-radius:16px}
    .signup-modal-grid{grid-template-columns:1fr}
    .signup-modal-left{display:none}
    .signup-modal-right{padding:28px 22px 24px}
    .signup-modal-right h3{font-size:22px}
    #signupForm .row.two{grid-template-columns:1fr}
    #signupForm .signup-actions{flex-direction:column;align-items:stretch}
    #signupForm .signup-actions .btn{width:100%}
  }

  @media (max-width: 480px){
    .hero h1{font-size:24px !important}
    .section-h h2,.h2{font-size:22px !important}
    .integ-grid{grid-template-columns:repeat(2,1fr)}
    .stat-card .num{font-size:24px}
    .cta-band h2{font-size:26px !important}
    .hero-actions .btn{font-size:13px;height:42px;padding:0 14px}
    /* Keep balloons visible on tiny phones too — just slightly smaller */
    .hv-card{font-size:10px;padding:6px 8px}
    .hv-card .hv-icon{width:22px;height:22px}
    .hero-visual{min-height:200px}
    .aggr-inner{font-size:12px}
    .header-cta{gap:6px}
    .header-cta .btn{padding:0 10px;font-size:12px;height:34px}
    .lang{font-size:11px;padding:4px 6px}
  }

  /* ====================================================
     BURGER + MOBILE MENU DRAWER
     Burger is hidden on desktop (.nav and .lang in header are visible
     instead); the burger toggles a slide-in drawer that mirrors the
     desktop nav on phones.
     ==================================================== */
  .burger{
    display:none;width:40px;height:40px;border-radius:10px;
    background:transparent;color:var(--c-ink);
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    transition:background .2s;
  }
  .burger:hover{background:var(--c-section-soft)}
  .burger span{
    display:block;width:20px;height:2px;border-radius:2px;
    background:currentColor;transition:transform .2s, opacity .2s;
  }
  .mobile-menu[aria-hidden="false"] .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mobile-menu[aria-hidden="false"] .burger span:nth-child(2){opacity:0}
  .mobile-menu[aria-hidden="false"] .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .mobile-menu{
    position:fixed;inset:0;z-index:110;
    pointer-events:none;
  }
  .mobile-menu[aria-hidden="false"]{pointer-events:auto}
  .mobile-menu-overlay{
    position:absolute;inset:0;
    background:rgba(20,16,26,0);transition:background .25s;
  }
  .mobile-menu[aria-hidden="false"] .mobile-menu-overlay{background:rgba(20,16,26,.45);backdrop-filter:blur(2px)}
  .mobile-menu-panel{
    position:absolute;top:0;right:0;bottom:0;
    width:min(320px,86%);background:#fff;
    box-shadow:-12px 0 40px rgba(20,16,26,.18);
    transform:translateX(100%);transition:transform .28s ease;
    display:flex;flex-direction:column;
    overflow-y:auto;
  }
  body[dir="rtl"] .mobile-menu-panel{
    right:auto;left:0;
    transform:translateX(-100%);
    box-shadow:12px 0 40px rgba(20,16,26,.18);
  }
  .mobile-menu[aria-hidden="false"] .mobile-menu-panel{transform:translateX(0)}
  .mobile-menu-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;border-bottom:1px solid var(--c-line);
  }
  .mobile-menu-head .logo img{height:24px;width:auto}
  .burger-close{
    width:36px;height:36px;border-radius:50%;
    background:var(--c-section-soft);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;color:var(--c-ink-2);line-height:1;
    transition:background .2s, color .2s;
  }
  .burger-close:hover{background:var(--c-primary);color:#fff}
  .mobile-menu-list{
    list-style:none;padding:8px 12px;margin:0;flex:1;
  }
  .mobile-menu-list li{margin:0}
  .mobile-menu-list > li > a{
    display:block;padding:14px 16px;
    font-size:15px;font-weight:700;color:var(--c-ink);
    border-radius:10px;transition:background .15s, color .15s;
    text-transform:uppercase;letter-spacing:.04em;
  }
  .mobile-menu-list > li > a:hover{background:var(--c-section-soft);color:var(--c-primary)}
  .mobile-menu-group{padding:8px 0}
  .mobile-menu-group-label{
    display:block;padding:14px 16px 6px;
    font-size:11px;font-weight:800;color:var(--c-muted);
    letter-spacing:.16em;text-transform:uppercase;
  }
  .mobile-menu-group ul{list-style:none;padding:0;margin:0}
  .mobile-menu-group ul li a{
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;font-size:14px;font-weight:600;color:var(--c-ink-2);
    border-radius:10px;transition:background .15s, color .15s;
  }
  .mobile-menu-group ul li a:hover{background:var(--c-section-soft);color:var(--c-primary)}
  .mobile-menu-group .dd-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
  .mobile-menu-foot{
    padding:16px 20px 24px;
    border-top:1px solid var(--c-line);
    display:flex;flex-direction:column;gap:12px;align-items:stretch;
  }
  .mobile-menu-foot .btn{width:100%}
  .mobile-menu-foot .lang{
    text-align:center;padding:10px;font-size:14px;font-weight:700;
    color:var(--c-primary);border:1px solid var(--c-line);border-radius:10px;
  }

  /* Desktop / tablet > 1024: never show burger or drawer */
  @media (min-width: 1025px){
    .burger{display:none !important}
    .mobile-menu{display:none !important}
  }

  /* ====================================================
     SIGN UP MODAL
     ==================================================== */
  .signup-modal{position:fixed;inset:0;z-index:120;display:none}
  .signup-modal[aria-hidden="false"]{display:block}
  .signup-modal-overlay{position:absolute;inset:0;background:rgba(20,16,26,.6);backdrop-filter:blur(4px)}
  .signup-modal-card{
    position:relative;
    max-width:920px;width:calc(100% - 40px);
    margin:60px auto;
    background:#fff;border-radius:24px;overflow:hidden;
    box-shadow:0 30px 80px rgba(76,32,91,.3);
    animation:popIn .25s ease;
  }
  @keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
  .signup-modal-grid{display:grid;grid-template-columns:1fr 1fr}
  .signup-modal-left{
    background:linear-gradient(135deg,var(--c-primary-soft) 0%,var(--c-section-soft) 100%);
    padding:60px 48px;display:flex;flex-direction:column;justify-content:center;
  }
  .signup-modal-left h2{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
  .signup-modal-left p{font-size:15px;color:var(--c-ink-2);line-height:1.6}
  .signup-modal-right{padding:40px 40px 36px}
  .signup-modal-right h3{font-size:24px;font-weight:800;margin-bottom:20px}
  .signup-modal-close{
    position:absolute;top:14px;right:14px;
    width:36px;height:36px;border-radius:50%;
    background:#fff;border:1px solid var(--c-line);
    display:flex;align-items:center;justify-content:center;
    color:var(--c-ink-2);z-index:2;
    transition:background .2s, color .2s;
  }
  .signup-modal-close svg{display:block}
  .signup-modal-close:hover{background:var(--c-section-soft);color:var(--c-primary)}
  body[dir="rtl"] .signup-modal-close{right:auto;left:14px}
  #signupForm{display:flex;flex-direction:column;gap:14px}
  #signupForm .row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #signupForm .fld{display:flex;flex-direction:column;gap:6px}
  #signupForm label{font-size:13px;font-weight:600;color:var(--c-ink-2)}
  #signupForm input[type=text],#signupForm input[type=email],#signupForm input[type=tel]{
    height:44px;padding:0 14px;
    border:1px solid var(--c-line);border-radius:10px;
    font-size:14px;font-family:inherit;color:var(--c-ink);
    transition:border-color .2s;
  }
  #signupForm input:focus{outline:0;border-color:var(--c-primary)}
  #signupForm .phone{display:grid;grid-template-columns:90px 1fr;gap:8px}
  #signupForm .phone select{
    height:44px;padding:0 10px;
    border:1px solid var(--c-line);border-radius:10px;
    font-size:14px;font-family:inherit;background:#fff;color:var(--c-ink);
  }
  #signupForm .check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--c-ink-2);line-height:1.45;cursor:pointer}
  #signupForm .check input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--c-primary);cursor:pointer}
  #signupForm .check a{color:var(--c-primary);text-decoration:underline}
  #signupForm .signup-actions{display:flex;align-items:center;gap:14px;margin-top:8px}
  #signupForm .signup-msg{font-size:13px}
  #signupForm .signup-msg.ok{color:#1f7a3a}
  #signupForm .signup-msg.err{color:#b9005b}
  @media (max-width:760px){
    .signup-modal-grid{grid-template-columns:1fr}
    .signup-modal-left{display:none}
    #signupForm .row.two{grid-template-columns:1fr}
  }

  /* RTL helpers — most LTR-specific rules above already work, mirror a few */
  body[dir="rtl"], body.lang-ar, body.is-rtl{font-family:'Alexandria','Plus Jakarta Sans',system-ui,sans-serif;text-align:right}
  body[dir="rtl"] *, body.lang-ar *, body.is-rtl *{font-family:inherit}
  body[dir="rtl"] .nav{flex-direction:row-reverse}
  body[dir="rtl"] .header-cta{flex-direction:row-reverse}
  body[dir="rtl"] .hero-grid{direction:rtl}
  body[dir="rtl"] .footer-grid{direction:rtl}
  body[dir="rtl"] .footer-bottom{direction:rtl}
  body[dir="rtl"] .blog-grid{direction:rtl}
  body[dir="rtl"] .ebook-grid{direction:rtl}

  /* ====================================================
     COOKIE CONSENT BANNER (PDPL)
     ==================================================== */
  .cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:130;display:none;padding:16px 20px;background:#fff;box-shadow:0 -10px 30px rgba(0,0,0,.12);border-top:1px solid var(--c-line)}
  .cookie-consent[aria-hidden="false"]{display:block}
  .cookie-consent-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
  .cookie-consent-text h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--c-text)}
  .cookie-consent-text p{margin:0;font-size:14px;line-height:1.55;color:var(--c-muted);max-width:780px}
  .cookie-consent-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .cookie-consent-actions .btn{padding:10px 18px;font-size:14px}
  .cookie-consent-cats{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
  .cookie-consent-cats[hidden]{display:none}
  .cookie-consent-actions .btn[hidden]{display:none}
  .cookie-consent-cats li{padding:12px 14px;background:#faf8fd;border:1px solid var(--c-line);border-radius:10px}
  .cookie-consent-cat{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;cursor:pointer;align-items:start}
  .cookie-consent-cat input{margin-top:3px}
  .cookie-consent-cat .ttl{font-weight:600;font-size:14px;color:var(--c-text);grid-column:2}
  .cookie-consent-cat .ttl em{font-style:normal;font-size:12px;color:var(--c-muted);font-weight:500;margin-left:6px}
  .cookie-consent-cat .dsc{font-size:13px;color:var(--c-muted);line-height:1.5;grid-column:2}
  body[dir="rtl"] .cookie-consent-cat .ttl em{margin-left:0;margin-right:6px}
  @media (max-width:860px){
    .cookie-consent{padding:14px 16px}
    .cookie-consent-inner{grid-template-columns:1fr;gap:14px}
    .cookie-consent-actions{justify-content:stretch}
    .cookie-consent-actions .btn{flex:1;min-width:0}
  }