/* Petwal Gems — inner-page hero banner (app/Views/partials/banner.php).
   Night-sky hero with the star canvas (js/petwal.js), a slow nebula, faceted texture and
   a themed 3D visual per page. Same palette and "gem finish" as the home page. */

.pb-hero {
    --pb-gold: #C59B2B; --pb-gold-hi: #F6DC98; --pb-gold-soft: #E2B46A; --pb-maroon: #8B1A1A; --pb-night: #12070a;
    --pb-grad: linear-gradient(135deg, #F6DC98 0%, #D9B048 38%, #C59B2B 62%, #8A6417 100%);
    --pb-size: min(360px, 30vw);
    position: relative; clear: both; display: flow-root; width: 100%; overflow: hidden; isolation: isolate; color: #fff;
    padding: clamp(56px, 6vw, 84px) 0 clamp(70px, 7vw, 96px); min-height: clamp(360px, 34vw, 460px);
    background: radial-gradient(900px 520px at 78% 40%, rgba(139, 26, 26, .62), transparent 65%),
        radial-gradient(700px 420px at 6% 110%, rgba(197, 155, 43, .16), transparent 65%),
        linear-gradient(180deg, #1c0a0e 0%, var(--pb-night) 100%);
    font-family: "Raleway", "Roboto", sans-serif;
}
.pb-hero *, .pb-hero *::before, .pb-hero *::after { box-sizing: border-box; }
.pb-hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.pb-hero__nebula { position: absolute; left: 62%; top: 50%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; z-index: -2; pointer-events: none;
    background: conic-gradient(from 0deg, transparent, rgba(139, 26, 26, .5) 60deg, rgba(197, 155, 43, .22) 120deg, transparent 170deg,
        rgba(96, 44, 150, .24) 220deg, rgba(139, 26, 26, .38) 280deg, transparent);
    filter: blur(70px); animation: pb-spin 90s linear infinite; }
.pb-hero__facets { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
    background: var(--ph-facets-light, none) 0 0 / 260px;
    -webkit-mask: radial-gradient(ellipse 60% 80% at 75% 50%, #000 10%, transparent 75%); mask: radial-gradient(ellipse 60% 80% at 75% 50%, #000 10%, transparent 75%); }
.pb-hero .container::before, .pb-hero .container::after { display: none; }
.pb-hero__container { position: relative; }
.pb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }

/* ---------- copy ---------- */
.pb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 13px; font-weight: 600; }
.pb-crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-gold-hi); }
.pb-crumbs li + li::before { content: "\f105"; font-family: FontAwesome; color: var(--pb-gold-soft); margin-right: 2px; }
.pb-crumbs a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: rgba(255, 244, 228, .85) !important;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .28); transition: background-color .25s; text-decoration: none !important; }
.pb-crumbs a:hover { background: rgba(255, 255, 255, .14); color: #fff !important; }
.pb-hero__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pb-gold-soft); }
.pb-hero__eyebrow span { width: 34px; height: 1px; background: var(--pb-gold); flex-shrink: 0; }
.pb-hero__title { margin: 0; font: 600 clamp(38px, 4.8vw, 64px)/1.06 "Cormorant Garamond", "Playfair Display", Georgia, serif; color: #fff; letter-spacing: -.01em; text-transform: none; }
.pb-hero__title em, .pb-hero__title .pg_deva, .pb-hero__title [class*="shimmer"] {
    font-style: italic; color: transparent !important;
    background: linear-gradient(100deg, #C59B2B 0%, #F6DC98 25%, #fff6dc 35%, #D9B048 50%, #C59B2B 70%, #F6DC98 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: pb-shimmer 6s linear infinite; }
.pb-hero__title .pg_deva { font-style: normal; font-family: "Noto Sans Devanagari", sans-serif; font-size: .66em; }
.pb-hero__lead { margin: 18px 0 0; max-width: 600px; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.75; color: rgba(255, 244, 228, .78); }
.pb-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.pb-hero__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(255, 244, 228, .9);
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .3); backdrop-filter: blur(6px); }
.pb-hero__facts i { color: var(--pb-gold-hi); }

/* ---------- visual stage ---------- */
.pb-hero__visual { display: grid; place-items: center; }
.pb-stage { position: relative; width: var(--pb-size); height: var(--pb-size); perspective: 900px; }
.pb-stage__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(246, 220, 152, .38), rgba(197, 155, 43, .1) 45%, transparent 70%); animation: pb-breathe 5s ease-in-out infinite; }
.pb-stage__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(246, 220, 152, .5); stroke-width: .9; }
.pb-stage__ring--outer { animation: pb-spin 140s linear infinite; filter: drop-shadow(0 0 8px rgba(246, 220, 152, .25)); }
.pb-ticks { stroke: rgba(197, 155, 43, .65); stroke-width: .7; }
.pb-stage__ring--yantra, .pb-stage__ring--facet, .pb-stage__ring--compass { animation: pb-spin 80s linear infinite reverse; stroke: rgba(246, 220, 152, .42); }
.pb-stage__ring--laurel { stroke: none; fill: rgba(197, 155, 43, .55); animation: pb-breathe 6s ease-in-out infinite; }
.pb-stage__ring--text { animation: pb-spin 50s linear infinite; }
.pb-stage__ring--text text { fill: var(--pb-gold-hi); stroke: none; font: 700 15px "Raleway", sans-serif; letter-spacing: 4px; }
.pb-fill { fill: rgba(246, 220, 152, .18); }

.pb-core { position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: #fff; box-shadow: 0 0 0 3px var(--pb-gold-hi), 0 0 0 9px rgba(197, 155, 43, .22), 0 24px 50px rgba(0, 0, 0, .55), 0 0 60px rgba(246, 220, 152, .3);
    animation: pb-float 7s ease-in-out infinite; }
.pb-core img { width: 100%; height: 100%; object-fit: cover; }
.pb-core--dark { background: radial-gradient(circle at 35% 28%, #4a1219, #12070a 75%); }
.pb-core__logo { object-fit: contain !important; padding: 18% 10%; }
.pb-core--gem img { object-fit: contain; padding: 12%; }
.pb-core__fa { font-size: calc(var(--pb-size) * .15); color: transparent; background: var(--pb-grad); -webkit-background-clip: text; background-clip: text; }
.pb-core__fa--fallback { display: none; }
.fa-feather:not(:empty)::before, .fa-feather::before { content: ""; }
.pb-core__sign::before { margin: 0 !important; font-size: calc(var(--pb-size) * .16) !important; color: transparent; background: var(--pb-grad); -webkit-background-clip: text; background-clip: text; }
.pb-core--medal { background: radial-gradient(circle at 32% 26%, #fff6dc, #F6DC98 30%, #C59B2B 70%, #8A6417); }
.pb-core--medal .pb-core__fa { color: #3b0d10; background: none; filter: drop-shadow(0 2px 2px rgba(255, 255, 255, .5)); }
.pb-core--pin { background: radial-gradient(circle at 32% 26%, #d9545a, #8B1A1A 50%, #4a0b10); }
.pb-core--pin .pb-core__fa { color: #fff; background: none; }
.pb-core--jewel { background: radial-gradient(circle at 35% 28%, #4a1219, #12070a 75%); }
.pb-jewel { width: 58%; height: 58%; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
    background: conic-gradient(from 30deg, #c0182b, #ff7a8a, #8b0d1c, #ff4d63, #6a0a15, #ff9aa6, #c0182b);
    filter: drop-shadow(0 0 18px rgba(255, 90, 110, .7)); animation: pb-turn 9s linear infinite; }

/* portrait arch (pandit) */
.pb-arch { position: absolute; left: 22%; top: 15%; width: 56%; aspect-ratio: 4 / 5; /* centred by offsets: the float animation owns `translate` */ padding: 4px; border-radius: 999px 999px 26px 26px;
    background: var(--pb-grad); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 60px rgba(197, 155, 43, .3); animation: pb-float 7s ease-in-out infinite; }
.pb-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; border-radius: 999px 999px 22px 22px; display: block; }

/* orbiting gems */
.pb-orbit { position: absolute; inset: 0; animation: pb-spin 40s linear infinite; }
.pb-orbit--slow { animation-duration: 70s; }
.pb-gem { --g: calc(var(--pb-size) * .085); --a: calc(360deg / var(--n) * var(--i));
    position: absolute; top: 50%; left: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2); border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 8%, transparent 26%),
        conic-gradient(from 20deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff), var(--c), color-mix(in srgb, var(--c) 60%, #000), var(--c));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 0 14px 2px color-mix(in srgb, var(--c) 70%, transparent);
    transform: rotate(var(--a)) translateY(calc(var(--pb-size) * -.36)); }

/* zodiac wheel */
.pb-wheel { position: absolute; inset: 0; animation: pb-spin 100s linear infinite; }
.pb-wheel__sign { --w: calc(var(--pb-size) * .1); position: absolute; top: 50%; left: 50%; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
    display: grid; place-items: center; transform: rotate(calc(var(--i) * 30deg)) translateY(calc(var(--pb-size) * -.37)); }
.pb-wheel__sign i::before { margin: 0 !important; font-size: calc(var(--pb-size) * .06) !important; color: transparent; background: var(--pb-grad); -webkit-background-clip: text; background-clip: text; }

/* contact pings */
.pb-ping { position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; border-radius: 50%; border: 1.5px solid rgba(246, 220, 152, .6); animation: pb-ping 3s ease-out infinite; }
.pb-ping--2 { animation-delay: 1.5s; }

/* floating chips */
.pb-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
    font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(28, 10, 14, .78); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .5), 0 14px 30px -14px rgba(0, 0, 0, .85); animation: pb-float 6s ease-in-out infinite; }
.pb-chip i { color: var(--pb-gold-hi); }
.pb-chip--a { left: -6%; top: 16%; }
.pb-chip--b { right: -4%; bottom: 14%; animation-delay: -3s; }

/* bottom edge */
.pb-hero__edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 44px; fill: #FFF8EF; }

/* entrance */
.pb-hero__copy > *, .pb-hero__visual { animation: pb-rise 1s cubic-bezier(.22, 1, .36, 1) both; }
.pb-hero__copy > :nth-child(2) { animation-delay: .08s; } .pb-hero__copy > :nth-child(3) { animation-delay: .16s; }
.pb-hero__copy > :nth-child(4) { animation-delay: .24s; } .pb-hero__copy > :nth-child(5) { animation-delay: .32s; }
.pb-hero__visual { animation-name: pb-zoom; animation-duration: 1.4s; animation-delay: .1s; }

@keyframes pb-spin { to { rotate: 360deg; } }
@keyframes pb-turn { to { filter: drop-shadow(0 0 18px rgba(255, 90, 110, .7)) hue-rotate(360deg); } }
@keyframes pb-shimmer { to { background-position: -220% 0; } }
@keyframes pb-breathe { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes pb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes pb-ping { from { scale: 1; opacity: .8; } to { scale: 2.2; opacity: 0; } }
@keyframes pb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pb-zoom { from { opacity: 0; transform: scale(.85) rotate(-12deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .pb-hero__copy > *, .pb-hero__visual { animation: pb-fade .6s ease both; }
    .pb-chip, .pb-core, .pb-arch { animation: none; }
}
@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 991px) {
    .pb-hero { --pb-size: min(280px, 64vw); min-height: 0; padding-top: 40px; }
    .pb-hero__grid { grid-template-columns: 1fr; gap: 30px; }
    .pb-hero__visual { order: -1; }
}
@media (max-width: 575px) {
    .pb-hero { --pb-size: min(230px, 62vw); }
    .pb-chip { font-size: 11px; padding: 7px 11px; }
    .pb-chip--a { left: -10%; } .pb-chip--b { right: -10%; }
    .pb-hero__facts li { font-size: 12px; padding: 7px 12px; }
}

/* =====================================================================
   Closing "Continue exploring" section (partials/explore_more.php)
   ===================================================================== */
.px-explore { clear: both; display: flow-root; width: 100%; position: relative; padding: clamp(56px, 7vw, 90px) 0; isolation: isolate;
    background: radial-gradient(40% 50% at 10% 20%, rgba(226, 180, 106, .2), transparent 70%), radial-gradient(40% 50% at 90% 90%, rgba(139, 26, 26, .07), transparent 70%), #FBF3E7;
    font-family: "Raleway", "Roboto", sans-serif; }
.px-explore .container::before, .px-explore .container::after { display: none; }
.px-explore__head { height: auto; text-align: center; margin: 0 auto 36px; }
.px-explore__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #8B1A1A; }
.px-explore__eyebrow span { width: 32px; height: 1px; background: #C59B2B; }
.px-explore__title { margin: 0; font: 600 clamp(30px, 3.4vw, 42px)/1.15 "Cormorant Garamond", "Playfair Display", Georgia, serif; color: #241c19; text-transform: none; }
.px-explore__title em { font-style: italic; color: #8B1A1A; }
.px-explore__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.px-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border-radius: 20px; overflow: hidden; isolation: isolate;
    color: #241c19 !important; text-decoration: none !important; border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, rgba(246, 220, 152, .95), #EFE3CF 32%, #EFE3CF 68%, rgba(197, 155, 43, .85)) border-box;
    box-shadow: 0 16px 40px -22px rgba(60, 31, 18, .4); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s, color .35s; }
.px-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #8B1A1A, #6e1419); clip-path: circle(0% at 46px 50px); transition: clip-path .7s cubic-bezier(.22, 1, .36, 1); }
.px-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -26px rgba(110, 20, 25, .55); color: #fff !important; }
.px-card:hover::before { clip-path: circle(150% at 46px 50px); }
.px-card__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 6px; font-size: 22px; color: #8B1A1A;
    background: radial-gradient(circle at 32% 24%, #fff, #fdf4e2 38%, #f2dcae); box-shadow: inset 0 2px 2px #fff, inset 0 -3px 6px rgba(197, 155, 43, .28), 0 0 0 1px rgba(226, 180, 106, .65);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1), background .4s, color .4s; }
.px-card:hover .px-card__icon { transform: rotate(-8deg) scale(1.05); color: #F6DC98; background: rgba(255, 255, 255, .12); }
.px-card__label { font: 600 22px/1.2 "Cormorant Garamond", "Playfair Display", Georgia, serif; }
.px-card__text { font-size: 14px; line-height: 1.6; color: #6a5d52; transition: color .35s; }
.px-card:hover .px-card__text { color: rgba(255, 244, 228, .82); }
.px-card__go { position: absolute; top: 24px; right: 22px; color: #C59B2B; transition: transform .35s; }
.px-card:hover .px-card__go { transform: translateX(4px); color: #F6DC98; }
@media (max-width: 991px) { .px-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .px-explore__grid { grid-template-columns: 1fr; } }
.px-explore { padding-bottom: clamp(120px, 12vw, 170px); } /* room for the footer CTA card that rises into this section */