/* ============ Hero 12 — 3D scattered photos (fixed) ============ */
.ihero12 { perspective: 1200px; }
.ihero12__scene { position: relative; min-height: 430px; transform-style: preserve-3d; transition: transform .25s ease; }
.ihero12__photo { position: absolute; border-radius: var(--radius-lg); overflow: hidden; border: 6px solid #fff; box-shadow: 0 22px 44px -14px rgba(0,69,228,.32); transition: transform .25s ease; }
.ihero12__photo img { width: 100%; height: 100%; object-fit: cover; }
.ihero12__photo.p1 { width: 54%; aspect-ratio: 4/3; inset-block-start: 2%; inset-inline-start: 0; rotate: -6deg; z-index: 1; }
.ihero12__photo.p2 { width: 48%; aspect-ratio: 1; inset-block-start: 34%; inset-inline-end: 2%; rotate: 5deg; z-index: 3; }
.ihero12__photo.p3 { width: 40%; aspect-ratio: 4/3; inset-block-end: 0; inset-inline-start: 20%; rotate: -3deg; z-index: 2; }

/* ============ Hero 13 — 3D tilt card ============ */
.ihero13 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; perspective: 1200px; }
.ihero13__scene { position: relative; transform-style: preserve-3d; transition: transform .2s ease; min-height: 360px; }
.ihero13__card { display: block; width: 100%; aspect-ratio: 4/3.4; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--cloud); }
.ihero13__card img { width: 100%; height: 100%; object-fit: cover; }
.ihero13__badge { position: absolute; inset-block-start: -7%; inset-inline-end: -5%; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--cloud-sm); }
.ihero13__badge .material-symbols-outlined { color: var(--primary); font-size: 2rem; }

/* ============ Hero 14 — 3D parallax layers ============ */
.ihero14 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; perspective: 1200px; }
.ihero14__scene { position: relative; transform-style: preserve-3d; transition: transform .2s ease; min-height: 410px; }
.ihero14__blob { position: absolute; inset: 8%; border-radius: 46% 54% 57% 43% / 50% 45% 55% 50%; background: color-mix(in srgb, var(--primary) 22%, transparent); }
.ihero14__img { position: absolute; inset-block: 6% 6%; inset-inline: 10% 6%; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--cloud); }
.ihero14__img img { width: 100%; height: 100%; object-fit: cover; }
.ihero14__mini { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 40%; aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden; border: 6px solid var(--background); box-shadow: var(--cloud-sm); }
.ihero14__mini img { width: 100%; height: 100%; object-fit: cover; }
.ihero14__star { position: absolute; inset-block-start: 0; inset-inline-end: 6%; color: var(--secondary); font-size: 2rem; }

/* ============ Hero 15 — 3D perspective gallery ============ */
.ihero15 { display: flex; flex-direction: column; gap: 40px; align-items: center; perspective: 1500px; }
.ihero15 .ih__sub { max-width: 58ch; }
.ihero15__deck { display: flex; justify-content: center; align-items: center; width: 100%; transform-style: preserve-3d; }
.ihero15__card { width: 30%; aspect-ratio: 3/4; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--cloud); border: 5px solid #fff; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ihero15__card img { width: 100%; height: 100%; object-fit: cover; }
.ihero15__card.c1 { transform: rotateY(24deg) translateX(22%) scale(.88); z-index: 1; }
.ihero15__card.c2 { transform: translateZ(50px) scale(1.06); z-index: 3; }
.ihero15__card.c3 { transform: rotateY(-24deg) translateX(-22%) scale(.88); z-index: 2; }
.ihero15__deck:hover .ihero15__card.c1 { transform: rotateY(16deg) translateX(12%) scale(.94); }
.ihero15__deck:hover .ihero15__card.c3 { transform: rotateY(-16deg) translateX(-12%) scale(.94); }

/* ============ Hero 16 — 3D floating glass panel ============ */
.ihero16 { perspective: 1300px; }
.ihero16__scene { position: relative; min-height: 480px; transform-style: preserve-3d; transition: transform .2s ease; }
.ihero16__img { position: absolute; inset: 0; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--cloud); }
.ihero16__img img { width: 100%; height: 100%; object-fit: cover; }
.ihero16__panel { position: absolute; inset-block-end: 9%; inset-inline-start: 6%; max-width: 480px; padding: clamp(24px,3vw,40px); border-radius: var(--radius-2xl); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; box-shadow: var(--cloud); }

@media (max-width: 900px) {
    .ihero13, .ihero14 { grid-template-columns: 1fr; }
    .ihero13__scene, .ihero14__scene { order: -1; }
    .ihero15__card { width: 44%; }
    .ihero16__scene { min-height: 400px; }
    .ihero12__scene { min-height: 360px; }
}
@media (max-width: 560px) {
    .ihero15__deck { flex-direction: column; perspective: none; gap: 14px; }
    .ihero15__card { width: 78%; transform: none !important; }
    .ihero16__panel { inset-inline: 12px; inset-block-end: 12px; max-width: none; }
}

/* ============ Full-bleed hero polish (7, 10, 16) ============ */
/* A single product-on-white studio shot stretched edge-to-edge looks muddy.
   Treat these as designed brand panels: deep blue gradient base + a soft,
   blurred product texture + a brand-tinted scrim so white text stays crisp. */

/* Hero 7 — glass card centred over full-bleed */
.ihero7 {
    background-color: var(--primary);
    background-image:
        radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--primary) 55%, #06122f) 0%, transparent 60%),
        radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--primary) 55%, #4f86ff) 0%, transparent 55%),
        linear-gradient(125deg, #0a1c46 0%, var(--primary) 60%, #1f57c9 100%);
}
.ihero7__bg { opacity: .30; filter: blur(4px) saturate(1.1); transform: scale(1.12); }
.ihero7__scrim { background: linear-gradient(120deg, rgba(6,16,42,.55) 0%, rgba(6,16,42,.20) 50%, rgba(30,80,200,.28) 100%); }

/* Hero 10 — cinematic wide band */
.ihero10 {
    background-color: var(--primary);
    background-image:
        linear-gradient(120deg, rgba(6,14,38,.78) 0%, rgba(10,32,96,.50) 55%, rgba(24,74,200,.40) 100%),
        var(--hero-img);
    background-size: cover, cover;
    background-position: center, center;
}
.ihero10__scrim {
    background:
        radial-gradient(140% 120% at 50% -10%, rgba(255,255,255,.10), transparent 60%),
        radial-gradient(120% 120% at 50% 120%, rgba(4,10,30,.55), transparent 60%);
}

/* Hero 16 — floating glass panel; keep the photo crisp, brand-tint the base */
.ihero16 {
    background-color: var(--primary);
    background-image: linear-gradient(125deg, #0a1c46 0%, var(--primary) 55%, #1f57c9 100%);
    border-radius: var(--radius-2xl);
    padding: clamp(14px, 2vw, 22px);
}
.ihero16__scene { min-height: 460px; }
.ihero16__img { inset: clamp(14px,2vw,22px); }

/* ============ Category tile scrims — gradient, not flat ============ */
/* Catalog images are product-on-white. A full dark scrim greys the whole
   tile; a bottom-anchored gradient keeps the product in full colour while
   still giving the label a legible dark strip. */
.cben__scrim, .csbig__scrim, .citile__scrim, .cmas__scrim, .vcat__scrim {
    background: linear-gradient(to top, rgba(7,14,32,.72) 0%, rgba(7,14,32,.30) 32%, rgba(7,14,32,.04) 56%, transparent 74%) !important;
}
.citile:hover .citile__scrim, .vcat:hover .vcat__scrim {
    background: linear-gradient(to top, rgba(7,14,32,.80) 0%, rgba(7,14,32,.34) 36%, rgba(7,14,32,.06) 60%, transparent 78%) !important;
}
/* Soft brand-tinted base so any letterboxing on a white product shot
   reads as an intentional card rather than dead grey. */
.cben__img, .csbig__img { background-color: #eef3fb; }

/* ============ Full-bleed promo polish (2, 7, 11) ============ */
/* Promo 2 — glass card over full-bleed image */
.ipromo2 {
    background-color: var(--primary);
    background-image: linear-gradient(125deg, #0a1c46 0%, var(--primary) 60%, #1f57c9 100%);
}
.ipromo2__bg { opacity: .28; filter: blur(4px) saturate(1.1); transform: scale(1.12); }
.ipromo2__scrim { background: linear-gradient(120deg, rgba(6,16,42,.50) 0%, rgba(6,16,42,.18) 55%, rgba(30,80,200,.26) 100%) !important; }

/* Promo 7 — wide banner */
.ipromo7 {
    background-color: var(--primary);
    background-image:
        linear-gradient(110deg, rgba(6,14,38,.80) 0%, rgba(10,32,96,.52) 55%, rgba(24,74,200,.40) 100%),
        var(--ip-img);
    background-size: cover, cover;
    background-position: center, center;
}
.ipromo7__scrim {
    background:
        radial-gradient(120% 140% at 0% 50%, rgba(4,10,30,.45), transparent 60%) !important;
}

/* Promo 11 — image strip with centred CTA */
.ipromo11 { background-color: var(--primary); }
.ipromo11__scrim {
    background: linear-gradient(115deg, rgba(6,14,38,.82) 0%, rgba(10,32,96,.58) 48%, rgba(24,74,200,.46) 100%) !important;
}

/* ============ Mobile overflow safety ============ */
html, body { overflow-x: hidden; }
.ih__title { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 560px) {
    .ih__title { font-size: 2rem; }
    .ipromo2__card h2, .ipromo7__text h2, .ipromo11__inner h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
    .section__title { font-size: clamp(1.4rem, 6vw, 2rem); }
}