/* =====================================================
   Azuriom Page Styles
   ===================================================== */

.page-azuriom {
    --primary-color: #5b6ee1;
    --primary-color-rgb: 91, 110, 225;
}

/* ── Hero ── */

.hero-section--azuriom {
    overflow: hidden;
}

.page-azuriom .orbs-background { z-index: 0; }

/* ── Tier name colors ── */
.page-azuriom .tier-card__name--starter { color: #94a3b8; }
.page-azuriom .tier-card__name--growth  { color: #7c8cf0; }
.page-azuriom .tier-card__name--pro     { color: #5b6ee1; }
.page-azuriom .tier-card__name--scale   { color: #a78bfa; }

/* ── Featured badge dark text ── */
.page-azuriom .tier-card__badge {
    color: #0a1628;
}

/* ── Responsive ── */

/* ── Deco edge fade ── */
/* poster.webp is an opaque catalogue poster, not a cut-out, so every edge is hard.
   Fading the bottom keeps it from reading as a floating rectangle. */
.page-azuriom .section-deco {
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
}

/* ── Deco positioning (desktop) ── */
/* Offsets only. Never set top/right/left/transform here - see the anchoring
   contract in _shared.css. Scoped per band so the bands never fight. */
@media (min-width: 992px) {
    .page-azuriom #plans .section-deco { --deco-x: -66px; --deco-y: 187px; }
    .page-azuriom #faq .section-deco { --deco-x: -66px; --deco-y: 186px; }
}

/* ── Deco positioning (tablet) ── */
@media (min-width: 769px) and (max-width: 991px) {
    .page-azuriom #plans .section-deco { --deco-x: -47px; --deco-y: 188px; }
    .page-azuriom #faq .section-deco { --deco-x: -47px; --deco-y: 188px; }
}

/* ── Deco positioning (small) ── */
@media (min-width: 576px) and (max-width: 768px) {
    .page-azuriom #plans .section-deco { --deco-x: -55px; --deco-y: 188px; }
    .page-azuriom #faq .section-deco { --deco-x: -55px; --deco-y: 188px; }
}

/* ── Deco positioning (phone) ── */
@media (max-width: 575px) {
    .page-azuriom #plans .section-deco { --deco-x: -55px; --deco-y: 246px; }
    .page-azuriom #faq .section-deco { --deco-x: -55px; --deco-y: 244px; }
}

@media (max-width: 960px) {
    .page-azuriom .orbs-background {
        opacity: 0.4;
    }
}