/*new 12-08-2026*/

.si-band{
  --si-ink:#1B1240;
  --si-ink-70:rgba(27,18,64,.70);
  --si-ink-45:rgba(27,18,64,.45);
  --si-ink-12:rgba(27,18,64,.12);
  --si-blush:#F2E8E9;
  --si-white:#FFFFFF;
  --si-accent:#B4304C;
  --si-display:'Bricolage Grotesque',system-ui,sans-serif;
  --si-body:'Instrument Sans',system-ui,sans-serif;
  --si-data:'DM Mono',ui-monospace,monospace;

  background:var(--si-blush);
  padding:56px 0;
  overflow:hidden;
  font-family:var(--si-body);
  color:var(--si-ink);
  line-height:1.55;
}
.si-band *{box-sizing:border-box}
.si-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---- header ---- */
.si-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.si-eyebrow{
  font-family:var(--si-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--si-ink-45);margin:0;
}
.si-band h2{
  font-family:var(--si-display);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(26px,3vw,34px);margin:12px 0 0;max-width:20ch;color:var(--si-ink);
}
.si-lede{margin:10px 0 0;color:var(--si-ink-70);max-width:46ch;font-size:16px}
.si-cta{
  font-size:14px;font-weight:600;color:var(--si-ink);text-decoration:none;
  border-bottom:1.5px solid var(--si-accent);padding-bottom:2px;white-space:nowrap;
}
.si-cta:hover{color:var(--si-accent)}

/* ---- marquee ---- */
.si-mq{margin-top:34px;position:relative}
.si-mq::before,.si-mq::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.si-mq::before{left:0;background:linear-gradient(90deg,var(--si-blush),rgba(242,232,233,0))}
.si-mq::after{right:0;background:linear-gradient(270deg,var(--si-blush),rgba(242,232,233,0))}

.si-track{display:flex;gap:10px;width:max-content;animation:si-slide 46s linear infinite}
.si-track--rev{animation-direction:reverse;animation-duration:56s;margin-top:10px}
.si-pill svg {
        width: 32px;
        height: 32px;
        min-width: 32px;
        display: block;
    }
.si-mq:hover .si-track,
.si-mq:focus-within .si-track{animation-play-state:paused}
@keyframes si-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- pills ---- */
.si-pill{
  background:var(--si-white);border:1px solid var(--si-ink-12);border-radius:999px;
  height:54px;padding:0 20px;display:flex;align-items:center;gap:10px;
  white-space:nowrap;text-decoration:none;transition:border-color .16s ease;
}
.si-pill img{width:22px;height:22px;object-fit:contain}
.si-pill .si-t{font-size:14px;color:var(--si-ink)}
.si-pill .si-c{
  font-family:var(--si-data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--si-ink-45);border-left:1px solid var(--si-ink-12);padding-left:10px;margin-left:2px;
}

@media(max-width:640px){
  .si-band{padding:40px 0}
  .si-pill{height:48px;padding:0 16px}
  .si-mq::before,.si-mq::after{width:44px}
}
/* ---- accessibility: no motion ---- */
@media(prefers-reduced-motion:reduce){
  .si-track{animation:none;width:100%;flex-wrap:wrap}
  .si-track--rev{margin-top:10px}
  .si-mq::before,.si-mq::after{display:none}
  .si-pill{transition:none}
}
.si-band a:focus-visible{outline:3px solid var(--si-accent);outline-offset:3px;border-radius:999px}


.sc-close{
  --sc-ink:#1B1240;
  --sc-ink-70:rgba(27,18,64,.70);
  --sc-ink-45:rgba(27,18,64,.45);
  --sc-ink-12:rgba(27,18,64,.12);
  --sc-white:#fff;
  --sc-blush:#F2E8E9;
  --sc-accent:#B4304C;
  --sc-display:'Bricolage Grotesque',system-ui,sans-serif;
  --sc-body:'Instrument Sans',system-ui,sans-serif;
  --sc-data:'DM Mono',ui-monospace,monospace;
  --sc-r:20px;

  background:var(--sc-blush);
  padding:76px 0 0;
  font-family:var(--sc-body);
  color:var(--sc-ink);
  line-height:1.55;
}
.sc-close *{box-sizing:border-box}
.sc-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sc-eyebrow{font-family:var(--sc-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sc-ink-45);margin:0}
.sc-close h2{
  font-family:var(--sc-display);font-weight:800;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(30px,4vw,46px);margin:14px 0 0;max-width:15ch;color:var(--sc-ink);
}

/* ---------- 1. primary CTA ---------- */
.sc-cta{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.sc-lede{margin:16px 0 0;font-size:17px;color:var(--sc-ink-70);max-width:46ch}
.sc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.sc-btn{display:inline-flex;align-items:center;font-weight:600;font-size:16px;padding:15px 28px;border-radius:999px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.sc-btn--primary{background:var(--sc-ink);color:#fff;box-shadow:0 8px 24px rgba(27,18,64,.18)}
.sc-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(27,18,64,.26)}
.sc-btn--ghost{background:transparent;color:var(--sc-ink);border:1.5px solid var(--sc-ink-12)}
.sc-btn--ghost:hover{border-color:var(--sc-ink);background:var(--sc-white)}
.sc-trust{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sc-trust li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15.5px;color:var(--sc-ink-70)}
.sc-trust b{color:var(--sc-ink);font-weight:600}
.sc-trust svg{margin-top:4px}

/* ---------- 2. app proof card ---------- */
.sc-app{
  margin-top:56px;background:var(--sc-white);border-radius:var(--sc-r);
  border:1px solid var(--sc-ink-12);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
}
.sc-app-copy{padding:44px}
.sc-app-copy h3{font-family:var(--sc-display);font-size:26px;font-weight:800;letter-spacing:-.02em;margin:12px 0 0;max-width:16ch}
.sc-app-copy p{margin-top:14px;font-size:15.5px;color:var(--sc-ink-70);max-width:44ch}
.sc-get{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap}
.sc-qr{width:96px;height:96px;border:1px solid var(--sc-ink-12);border-radius:12px;padding:6px;background:#fff}
.sc-qr img{width:100%;height:100%;object-fit:contain;display:block}
.sc-stores{display:grid;gap:8px}
.sc-stores img{height:40px;width:auto;display:block}
.sc-qr-note{font-family:var(--sc-data);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sc-ink-45);margin-top:14px}
.sc-app-visual{background:linear-gradient(160deg,#F7F1F2,#EDE6EE);display:grid;place-items:center;padding:30px}
.sc-app-shot{max-width:100%;height:auto;display:block}

/* ---------- 3. languages ---------- */
.sc-langs{margin-top:56px;border-top:1px solid var(--sc-ink-12);padding:34px 0 48px;overflow: hidden;}
.sc-langs-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sc-langs-head b{font-family:var(--sc-display);font-size:19px;font-weight:600}
.sc-langs-head span{font-size:14.5px;color:var(--sc-ink-70)}
.sc-flags{display:flex;/*flex-wrap:wrap;*/gap:8px;animation: si-slide 46s linear infinite;}
.sc-lang{display:inline-flex;align-items:center;gap:9px;background:var(--sc-white);border:1px solid var(--sc-ink-12);border-radius:999px;padding:8px 16px 8px 8px;flex: 0 0 auto;}
.sc-lang img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 24px}
.sc-lang .sc-n{font-size:14px}
.sc-lang .sc-en{font-size:12px;color:var(--sc-ink-45)}
.sc-rtl{display:inline-block;margin-top:18px;font-size:13.5px;color:var(--sc-ink-70);background:rgba(180,48,76,.06);border:1px solid rgba(180,48,76,.16);border-radius:999px;padding:8px 16px;unicode-bidi:isolate}
.sc-rtl b{color:var(--sc-accent);font-weight:600}

@media(max-width:900px){
  .sc-cta{grid-template-columns:1fr;gap:32px}
  .sc-app{grid-template-columns:1fr}
  .sc-app-copy{padding:32px}
  .sc-app-visual{padding:24px;order:-1}
  .sc-close{padding-top:52px}
}
@media(max-width:640px){
  .sc-lang{padding:7px 13px 7px 7px}
  .sc-lang .sc-en{display:none}
}
@media(prefers-reduced-motion:reduce){.sc-close *{transition:none!important}}
.sc-close a:focus-visible{outline:3px solid var(--sc-accent);outline-offset:3px;border-radius:999px}

.customer-stories {
    width: calc(100%);
    margin: 5px auto 40px;
    padding: 76px 0 70px;
    /*background: #1d2454;
    border: 1px solid #111738;*/
    border-radius: 38px;    
    background: var(--white);
    overflow: hidden;
    position: relative;
    max-width:1340px
}
/* Heading */
.stories-heading {
    text-align: center;
    margin-bottom: 51px;
    position: relative;
    z-index: 2;
}
.stories-heading .eyebrow {
    font-size: 9px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.stories-heading h2 {
    color: #1d2454;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
}
/* Slider */
.stories-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.stories-track {
    display: flex;
    width: max-content;
    gap: 23px;
    animation: storiesSlide 35s linear infinite;
}
.stories-slider:hover .stories-track {
    animation-play-state: paused;
}
/* Card */
.story-card {
    width: 295px;
    flex: 0 0 295px;
    /*color: #fff;*/
    color: #1d2454;
    position: relative;
}
.story-image {
    width: 295px;
    height: 395px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #ddd;
}
.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Play button */
.play-video-button{
    position: absolute;
    height:100%;
    width: 100%;
    top:0;
    left:0;
    background:transparent;
    border:0;
    display:block;
    z-index: 6;
}
.play-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d51a9d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: opacity .3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border:0;
    opacity:0;
}
.play-button::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #fff;
    margin-left: 3px;
}
.play-video-button:hover .play-button{
    transform: translate(-50%, -50%) scale(1);
    opacity:1
}
/* Text */
.story-info {
    padding-top: 13px;
    text-align: center;
}
.story-name {
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 9px;
    white-space: nowrap;
}
.story-company {
    /*color: #c5c9ed;*/
    color: #737894;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Slider animation */
@keyframes storiesSlide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* Desktop spacing to match screenshot */
@media (min-width: 1200px) {
    .stories-track {
        padding-left: 10px;
    }
}
/* Tablet */
@media (max-width: 900px) {
    .customer-stories {
        padding: 60px 0 55px;
        border-radius: 30px;
    }
    .stories-heading {
        margin-bottom: 40px;
    }
    .stories-heading h2 {
        font-size: 28px;
    }
    .story-card,
    .story-image {
        width: 165px;
        flex: 0 0 165px;
    }
    .story-image {
        height: 275px;
    }
}
/* Mobile */
@media (max-width: 600px) {
    .customer-stories {
        width: calc(100% - 12px);
        margin: 6px auto;
        padding: 48px 0 45px;
        border-radius: 25px;
    }
    .stories-heading {
        padding: 0 20px;
        margin-bottom: 32px;
    }
    .stories-heading .eyebrow {
        margin-bottom: 18px;
    }
    .stories-heading h2 {
        font-size: 25px;
        line-height: 1.25;
    }
    .stories-track {
        gap: 14px;
        animation-duration: 28s;
    }
    .story-card,
    .story-image {
        width: 145px;
        flex: 0 0 145px;
    }
    .story-image {
        height: 235px;
        border-radius: 17px;
    }
    .story-name {
        font-size: 12px;
    }
    .story-company {
        font-size: 7px;
    }
}
/* ==========================
   VIDEO POPUP
========================== */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition:opacity .3s ease, visibility .3s ease;
}

.video-modal.active {
    visibility: visible;
    opacity: 1;
}
.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(5px);
}
/* Popup */
.video-popup {
    width: min(900px, calc(100% - 40px));
    position: relative;
    z-index: 2;
    transform: scale(.8);
    transition: transform .35s ease;
}

.video-modal.active .video-popup {
    transform: scale(1);
}
/* Video */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;
    border-radius: 14px;
    background: #000;
}
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
/* Close */

.video-close {
    position: absolute;
    right: -15px;
    top: -15px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-close:hover {
    background: #d719a7;
    color: #fff;
}

/* Mobile */

@media (max-width: 600px) {

    .video-popup {
        width: calc(100% - 24px);
    }
    .video-close {
        right: -5px;
        top: -48px;
    }
}