.py-6{padding-top:3.5rem;padding-bottom:3.5rem}.py-7{padding-top:5rem;padding-bottom:5rem}
.bg-soft{background:#f7f9fb}.bg-soft-primary{background:#e9f1ff}
.bg-gradient-sim{background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%)}
.icon-chip{width:44px;height:44px;display:inline-grid;place-items:center;background:#f4f5f7}
.icon-chip i{font-size:20px}
.hero-shot img{object-fit:cover}
.sim-hero-accent{width:42vw;height:42vw;background:radial-gradient(60% 60% at 50% 50%, rgba(29,77,191,.15) 0%, rgba(29,77,191,0) 70%);pointer-events:none}
.audience img{object-fit:cover;height:180px}
.badge.bg-soft-primary{background:rgba(29,77,191,.08)}
 .img_caroussel {
     height: 22em;
 }
@media(max-width:500px)  {
    .img_caroussel {
        height: 15em;
    }
}
     /* ===== Palette & helpers ===== */
 :root{
     --si-red:#dc3545;
     --si-red-600:#b02a37;
     --si-red-50:#fff5f6;
     --si-ink:#212529;
 }
.bg-soft-rose{
    background: linear-gradient(180deg, var(--si-red-50) 0%, #ffffff 60%);
}
.shadow-rose{ box-shadow:0 18px 50px rgba(220,53,69,.12); }
.rounded-12{ border-radius: 1rem; }
.rounded-16{ border-radius: 1.2rem; }
.fw-extrabold{ font-weight: 800; }

/* ===== Reveal (subtle animation without extra libs) ===== */
@media (prefers-reduced-motion:no-preference){
    .reveal{ opacity:0; transform:translateY(12px); animation:reveal .6s ease forwards; }
    .reveal-2{ animation-delay:.15s; } .reveal-3{ animation-delay:.3s; } .reveal-4{ animation-delay:.45s; }
    @keyframes reveal{ to{opacity:1; transform:none;} }
}

/* ===== Steps ===== */
.step-card{
    border:1px solid rgba(220,53,69,.18);
    background:#fff;
    border-radius:1rem;
    padding:1.5rem;
    height:100%;
    transition:.18s ease;
}
.step-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(220,53,69,.12); }
.step-badge{
    width:40px;height:40px; display:grid; place-items:center;
    border-radius:50%;
    background:rgba(220,53,69,.12); color:var(--si-red); font-weight:700;
    margin:0 auto .75rem auto;
}

/* ===== App showcase (carousel + copy) ===== */
.app-showcase{
    background:#fff;
    border:1px solid rgba(220,53,69,.12);
    border-radius:1.2rem;
    box-shadow:0 18px 44px rgba(0,0,0,.06);
    overflow:hidden;
}
.app-carousel .ratio{ border-radius:.75rem; }
.carousel-indicators [data-bs-target]{
    width:8px;height:8px;border-radius:50%;
    background:rgba(220,53,69,.35);
}
.carousel-indicators .active{ background:var(--si-red); }
.carousel-control-prev, .carousel-control-next{
    width:42px;height:42px; top:50%; transform:translateY(-50%);
    background:#fff; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.12);
    opacity:.95;
}
.carousel-control-prev:hover, .carousel-control-next:hover{ opacity:1; }

/* ===== CTA strip ===== */
.cta-strip{
    background: linear-gradient(135deg, #fff0f2 0%, #ffe6ea 100%);
    border:1px solid rgba(220,53,69,.14);
    border-radius:1.2rem;
}
 .bg-soft-primary { background: rgba(29,77,191,.08); }
.ratio-9x16 { aspect-ratio: 9/16; }
.object-fit-cover { object-fit: cover; }
.py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
 .py-6{padding-top:3.5rem;padding-bottom:3.5rem}
.bg-soft{background:#f7f9fb}
.bg-soft-primary{background:rgba(29,77,191,.08)}
.object-fit-cover{object-fit:cover}
.ratio-21x9{aspect-ratio:21/9}