/* ==========================================================================
   Solution (product landing) pages — /{locale}/software/{slug}
   Builds on the `hm-` design system in app.css; only page-specific parts here.
   ========================================================================== */

/* ---------- Hero ---------- */
.sp-hero {
    position: relative;
    padding: 136px 0 136px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #fff 0%, var(--hm-brand-soft) 100%);
}
.sp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.sp-hero-title {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.12;
    margin: 20px 0 0;
    text-wrap: balance;
}
html[lang="bn"] .sp-hero-title { line-height: 1.3; }
.sp-hero-sub {
    font-size: var(--fs-lead);
    color: var(--hm-muted);
    margin: 18px 0 0;
    max-width: 560px;
    text-wrap: pretty;
}
.sp-actions { justify-content: flex-start; margin-top: 32px; }

.sp-hero-visual { position: relative; }
.sp-hero-visual::before {
    content: '';
    position: absolute;
    inset: 12% 8% -4%;
    background: linear-gradient(100deg, rgba(var(--hm-brand-rgb), .45), rgba(var(--hm-brand-2-rgb), .35));
    filter: blur(60px);
    opacity: .4;
    z-index: -1;
    border-radius: 50%;
}
.sp-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--hm-r-lg);
}

/* No hero image: brand icon with the highlight titles orbiting it */
.sp-hero-fallback {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--hm-r-lg);
    background:
        radial-gradient(circle at 50% 50%, #fff 0 22%, transparent 22.2%),
        radial-gradient(circle at 50% 50%, var(--hm-brand-soft) 0 38%, transparent 38.2%),
        linear-gradient(160deg, #fff, var(--hm-soft));
    border: 1px solid var(--hm-line);
    box-shadow: var(--hm-shadow-lg);
}
.sp-hero-fallback-icon {
    position: absolute;
    top: 50%; left: 50%;
    width: 104px; height: 104px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: var(--hm-logo-grad);
    color: #fff;
    font-size: 3rem;
    box-shadow: 0 24px 48px -16px rgba(var(--hm-brand-rgb), .55);
}
.sp-hero-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 46%;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--hm-line);
    box-shadow: var(--hm-shadow);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--hm-ink);
    line-height: 1.3;
}
.sp-hero-chip .bi { color: var(--hm-brand); font-size: 1.1rem; flex-shrink: 0; }
.sp-hero-chip-1 { top: 10%;  left: 6%; }
.sp-hero-chip-2 { top: 18%;  right: 5%; }
.sp-hero-chip-3 { bottom: 18%; left: 4%; }
.sp-hero-chip-4 { bottom: 9%;  right: 7%; }

/* ---------- Highlights: centred cards straddling the hero's bottom edge ---------- */
.sp-highlights { position: relative; z-index: 2; margin-top: -88px; }
.sp-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
}
.sp-highlight {
    text-align: center;
    background: #fff;
    border-radius: 6px;
    padding: 28px 18px 30px;
    box-shadow: 0 4px 18px rgba(var(--hm-ink-rgb), .12);
    transition: transform .25s var(--hm-ease), box-shadow .25s var(--hm-ease);
}
.sp-highlight:hover { transform: translateY(-4px); box-shadow: 0 14px 32px -10px rgba(var(--hm-ink-rgb), .22); }
.sp-highlight-icon {
    width: 84px; height: 84px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--hm-brand-soft), #E3EEFB 60%, #F6E8F7);
    color: var(--hm-brand);
    font-size: 2.4rem;
}
.sp-highlight-icon img { width: 84px; height: 84px; object-fit: contain; }
.sp-highlight-icon:has(img) { background: none; }
.sp-highlight-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: var(--hm-ink); }
.sp-highlight-desc { font-size: var(--fs-sm); color: var(--hm-body); margin: 0; line-height: 1.5; }

/* ---------- Big centred section heading ---------- */
.sp-head { text-align: center; max-width: 1140px; margin: 0 auto 56px; }
.sp-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--hm-ink);
    text-wrap: balance;
}
html[lang="bn"] .sp-title { line-height: 1.35; }
.sp-head-sub {
    font-size: 1.1rem;
    color: var(--hm-body);
    line-height: 1.8;
    max-width: 900px;
    margin: 18px auto 0;
}

/* ---------- Feature rows: picture | text, swapping sides ---------- */
.sp-rows { max-width: 1140px; margin: 0 auto; display: grid; gap: 64px; }
.sp-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
    align-items: center;
}
.sp-row.is-flipped { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.sp-row.is-flipped .sp-row-media { order: 2; }
.sp-row-media img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}
.sp-row-title {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--hm-ink);
}
.sp-row-desc {
    font-size: 1.1rem;
    color: var(--hm-body);
    margin: 0;
    line-height: 1.8;
}

/* No screenshot: a soft blob with the feature icon on a little "screen" */
.sp-illus {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #E3E3F8 0%, var(--hm-brand-soft) 55%, var(--hm-soft) 100%);
}
.sp-illus-card {
    position: absolute;
    top: 50%; left: 50%;
    width: 58%; aspect-ratio: 4 / 3;
    transform: translate(-50%, -50%) rotate(-4deg);
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 44px -18px rgba(var(--hm-brand-rgb), .45);
    color: var(--hm-brand);
    font-size: clamp(2.6rem, 6vw, 3.6rem);
}
.sp-illus-dot { position: absolute; border-radius: 50%; }
.sp-illus-dot-1 { width: 18%; aspect-ratio: 1; top: 8%;  right: 12%; background: linear-gradient(135deg, var(--hm-green-bright), var(--hm-brand-2)); opacity: .85; }
.sp-illus-dot-2 { width: 10%; aspect-ratio: 1; bottom: 14%; left: 10%; background: var(--hm-magenta); opacity: .55; }
.sp-illus-dot-3 { width: 7%;  aspect-ratio: 1; bottom: 8%;  right: 26%; background: var(--hm-orange); opacity: .8; }

/* ---------- Benefits ---------- */
.sp-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.sp-benefit {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-r);
    padding: 24px;
}
.sp-benefit-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hm-green-soft);
    color: var(--hm-green);
    font-size: 1.2rem;
}
.sp-benefit-title { font-size: 1rem; font-weight: 600; margin: 2px 0 6px; }
.sp-benefit-desc { font-size: var(--fs-sm); color: var(--hm-muted); margin: 0; line-height: 1.6; }

/* ---------- Packages ---------- */
.sp-plan-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--hm-muted);
    margin: 0 0 10px;
}
.sp-plan-setup strong { color: var(--hm-ink); }
.hm-plan.is-popular .sp-plan-setup { color: rgba(255, 255, 255, .7); }
.hm-plan.is-popular .sp-plan-setup strong { color: #fff; }


/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .sp-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 991.98px) {
    .sp-hero { padding: 116px 0 120px; }
    .sp-hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .sp-hero-sub { margin-left: auto; margin-right: auto; }
    .sp-actions { justify-content: center; }
    .sp-hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
    .sp-rows { gap: 48px; }
    .sp-row,
    .sp-row.is-flipped { grid-template-columns: 1fr; gap: 20px; text-align: center; }
    .sp-row.is-flipped .sp-row-media { order: 0; }
    .sp-illus { max-width: 220px; }
    .sp-row-title { margin-bottom: 12px; }
    .sp-row-desc { font-size: 1rem; text-align: left; }
    .sp-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .sp-highlights { margin-top: -72px; }
    .sp-illus { max-width: 160px; }
    .sp-rows { gap: 40px; }
    .sp-highlight-grid { gap: 12px; }
    .sp-highlight { padding: 20px 12px 22px; }
    .sp-highlight-icon { width: 64px; height: 64px; font-size: 1.8rem; border-radius: 18px; }
    .sp-highlight-icon img { width: 64px; height: 64px; }
    .sp-highlight-title { font-size: 1rem; }
    .sp-highlight-desc { font-size: var(--fs-sm); }
    .sp-benefit-grid { grid-template-columns: 1fr; }
    .sp-hero-chip { font-size: var(--fs-xs); padding: 8px 10px; }
    .sp-hero-fallback-icon { width: 76px; height: 76px; font-size: 2.2rem; border-radius: 20px; }
}