/* ═══════════════════════════════════════════════════════════
   HOMEPAGE V2 — Prayag Pandits
   "Ancestor's home" — sacred, warm, trust-building.
   Design DNA: Contact + About + City Hub patterns.
   ═══════════════════════════════════════════════════════════ */

/* ── Homepage uses the standard design-system saffron (not muted) ── */

/* ── Shared Section Typography ── */
.hp-eyebrow {
    font-family: var(--ppn-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ppn-saffron-deep);
    margin: 0 0 12px;
}
.hp-stitle {
    font-family: var(--ppn-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--ppn-charcoal);
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    text-wrap: balance;
}
.hp-ssub {
    font-family: var(--ppn-font-body);
    font-size: 0.92rem;
    color: var(--ppn-text-muted);
    line-height: 1.7;
    margin: 0 0 40px;
    max-width: 560px;
}
.hp-section-header { text-align: center; }
.hp-section-header .hp-ssub { margin-left: auto; margin-right: auto; }

/* ═══ 1. HERO — Animated gradient, compact, 2-column ═══ */
.hp-hero {
    position: relative;
    background: linear-gradient(135deg, #3d0a14 0%, #960000 25%, #7b1f2e 50%, #5c0f1f 75%, #2d0710 100%);
    background-size: 400% 400%;
    animation: hpGradientShift 12s ease infinite;
    overflow: hidden;
}
.hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(232,115,26,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(150,0,0,0.15) 0%, transparent 50%);
    pointer-events: none;
}
@keyframes hpGradientShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 0%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}
.hp-hero__inner {
    position: relative;
    z-index: 1;
    padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
}
.hp-hero__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: center;
}
.hp-hero__content {
    max-width: 620px;
}
.hp-hero__kicker {
    font-family: var(--ppn-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ppn-saffron);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hp-hero__kicker-dot {
    width: 6px;
    height: 6px;
    background: #25D366;
    border-radius: 50%;
    animation: hpLivePulse 2s ease-in-out infinite;
}
.hp-hero__title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 0 0 14px;
    text-wrap: balance;
}
.hp-hero__sub {
    font-family: var(--ppn-font-body);
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: rgba(255,255,255,0.7);
    line-height: 1.65;
    margin: 0 0 22px;
    max-width: 500px;
}
.hp-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hp-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--ppn-radius-pill);
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}
.hp-hero__btn:active { transform: scale(0.97); }
.hp-hero__btn--wa {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}
.hp-hero__btn--wa:hover {
    background: #1DA851;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,211,102,0.4);
}
.hp-hero__btn--explore {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
}
.hp-hero__btn--explore:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

/* ═══ SEARCH TRIGGER BUTTON (hero) ═══ */
.hp-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: var(--ppn-radius-pill);
    padding: 12px 20px;
    color: rgba(255,255,255,0.55);
    font-family: var(--ppn-font-heading);
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
    margin-bottom: 20px;
    max-width: 380px;
    width: 100%;
}
.hp-search-trigger:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.8);
}
.hp-search-trigger svg {
    flex-shrink: 0;
    opacity: 0.5;
}
.hp-search-trigger__text {
    flex: 1;
    text-align: left;
}
.hp-search-trigger__kbd {
    font-family: var(--ppn-font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 2px 7px;
    line-height: 1.4;
    color: rgba(255,255,255,0.4);
}

/* ═══ SEARCH MODAL OVERLAY ═══
   Matched to fly cart design system:
   - Centered scale-in reveal (0.92 -> 1.0)
   - Warm cream gradient background
   - Deep layered shadow
   - 280ms Headspace easing
   - Mobile: bottom sheet slides up
   ═══════════════════════════════════════ */
.hp-search-modal {
    --sm-ease: cubic-bezier(0.32, 0.94, 0.6, 1);
    position: fixed;
    inset: 0;
    z-index: 99993;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 280ms var(--sm-ease), visibility 0s 280ms;
}
.hp-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
}
.hp-search-modal__container {
    position: relative;
    width: 460px;
    max-width: 92vw;
    height: min(80vh, 600px);
    background: linear-gradient(180deg, #fffdfb 0%, #fdf5ee 100%);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 280ms var(--sm-ease), transform 280ms var(--sm-ease);
}

/* Open state */
body.hp-search-modal--open .hp-search-modal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 280ms var(--sm-ease), visibility 0s;
}
body.hp-search-modal--open .hp-search-modal__container {
    opacity: 1;
    transform: scale(1);
}
body.hp-search-modal--open {
    overflow: hidden;
}

/* Modal header (search input row) */
.hp-search-modal__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    transition: border-color 200ms ease;
}
.hp-search-modal__header:focus-within {
    border-bottom-color: rgba(150, 0, 0, 0.18);
}
.hp-search-modal__form {
    display: flex;
    align-items: center;
    padding: 6px 12px 6px 24px;
}
.hp-search-modal__icon {
    flex-shrink: 0;
    color: rgba(68, 68, 68, 0.45);
    margin-right: 6px;
}
.hp-search-modal__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 16px 12px;
    color: rgb(68, 68, 68);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    min-width: 0;
    -webkit-font-smoothing: antialiased;
}
/* Override global :focus-visible saffron outline inside the modal */
.hp-search-modal__input:focus,
.hp-search-modal__input:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}
.hp-search-modal__input::placeholder {
    color: rgba(68, 68, 68, 0.4);
}
.hp-search-modal__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgb(68, 68, 68);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms var(--sm-ease);
}
.hp-search-modal__close:hover {
    background: rgba(68, 68, 68, 0.08);
}
.hp-search-modal__close:focus-visible {
    outline: none;
    background: rgba(68, 68, 68, 0.08);
}

/* Modal body (results + hint) */
.hp-search-modal__body {
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;            /* Critical: allow flex child to shrink below content size */
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Styled scrollbar — thin, maroon-tinted */
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 0, 0, 0.2) transparent;
}
.hp-search-modal__body::-webkit-scrollbar {
    width: 5px;
}
.hp-search-modal__body::-webkit-scrollbar-track {
    background: transparent;
}
.hp-search-modal__body::-webkit-scrollbar-thumb {
    background: rgba(150, 0, 0, 0.18);
    border-radius: 100px;
}
.hp-search-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 0, 0, 0.3);
}
.hp-search-modal__hint {
    padding: 28px 0;
    text-align: center;
}
.hp-search-modal__hint p {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.78rem;
    color: rgba(68, 68, 68, 0.45);
    margin: 0 0 16px;
}
.hp-search-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.hp-search-modal__tag {
    background: #faf9f5;
    border: 1px solid #e8ddd0;
    border-radius: 100px;
    padding: 8px 18px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a3728;
    cursor: pointer;
    transition: background 150ms var(--sm-ease), box-shadow 150ms var(--sm-ease), transform 150ms var(--sm-ease);
}
.hp-search-modal__tag:hover {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.hp-search-modal__tag:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(150, 0, 0, 0.15);
}

/* Autocomplete results (inside modal body) */
.hp-search__results {
    display: none;
    padding: 8px 0 16px;
}
.hp-search__results--open { display: block; }

/* Staggered fade-up entrance for result items */
@keyframes hpSearchResultIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hp-search__result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    text-decoration: none;
    color: rgb(68, 68, 68);
    border-radius: 12px;
    border-left: 3px solid transparent;
    transition: background 150ms var(--sm-ease), transform 150ms var(--sm-ease), border-color 150ms var(--sm-ease);
    margin-bottom: 4px;
    animation: hpSearchResultIn 280ms var(--sm-ease) both;
}
.hp-search__result:last-child { margin-bottom: 0; }
.hp-search__result:hover {
    background: rgba(150, 0, 0, 0.03);
    transform: translateX(3px);
}
.hp-search__result--active {
    background: #faf9f5;
    border-left-color: #960000;
}
.hp-search__result-img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #faf9f5;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.hp-search__result-info {
    flex: 1;
    min-width: 0;
}
.hp-search__result-name {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgb(68, 68, 68);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
.hp-search__result-price {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #E8731A;
    margin-top: 3px;
}
/* "View" pill on result items */
.hp-search__result-view {
    flex-shrink: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #960000;
    background: rgba(150, 0, 0, 0.06);
    border-radius: 100px;
    padding: 5px 12px;
    white-space: nowrap;
    transition: background 150ms var(--sm-ease), color 150ms var(--sm-ease);
}
.hp-search__result:hover .hp-search__result-view {
    background: rgba(150, 0, 0, 0.12);
    color: #B80000;
}
.hp-search__empty {
    padding: 36px 0;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.85rem;
    color: rgba(68, 68, 68, 0.45);
}
.hp-search__loading {
    padding: 32px 0;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.82rem;
    color: rgba(68, 68, 68, 0.45);
}

/* Search modal mobile: bottom sheet (matches fly cart) */
@media (max-width: 768px) {
    .hp-search-modal__container {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translate(0, 100%) scale(1);
        opacity: 0;
    }
    body.hp-search-modal--open .hp-search-modal__container {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    .hp-search-modal__form { padding: 4px 10px 4px 20px; }
    .hp-search-modal__input { font-size: 1rem; padding: 14px 10px; }
    .hp-search-modal__body { padding: 0 20px; }
    .hp-search-modal__hint { padding: 20px 0; }
    .hp-search__result { padding: 10px 10px; gap: 12px; }
    .hp-search__result-img { width: 48px; height: 48px; }
    .hp-search__result-name { font-size: 0.84rem; }
    .hp-search__result-view { font-size: 0.68rem; padding: 4px 10px; }
}

/* ═══ HERO SIDEBAR — Ticker + Stats ═══ */
.hp-hero__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Live ticker — slide-up animation ── */
.hp-ticker {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--ppn-radius-lg, 16px);
    padding: 16px 20px 18px;
}
.hp-ticker__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.hp-ticker__dot {
    width: 7px;
    height: 7px;
    background: #25D366;
    border-radius: 50%;
    animation: hpLivePulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(37,211,102,0.5);
    flex-shrink: 0;
}
.hp-ticker__label {
    font-family: var(--ppn-font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.hp-ticker__window {
    min-height: 44px;
    overflow: hidden;
    position: relative;
}
.hp-ticker__track {
    position: relative;
    min-height: 44px;
}
.hp-ticker__msg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: var(--ppn-font-heading);
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-ticker__msg--active {
    opacity: 1;
    transform: translateY(0);
}
.hp-ticker__msg--exit {
    opacity: 0;
    transform: translateY(-16px);
}

/* ── Compact stats grid ── */
.hp-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--ppn-radius-lg, 16px);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}
.hp-hero__stat {
    text-align: center;
    font-family: var(--ppn-font-heading);
    padding: 16px 10px;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
}
.hp-hero__stat-num {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.hp-hero__stat-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ═══ SCROLLING MARQUEE — benefits + reviews ═══ */
.hp-marquee {
    position: relative;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    padding: 12px 0;
    margin-top: 0;
    max-width: 100vw;
}
.hp-marquee__track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: hpMarqueeScroll 45s linear infinite;
    width: max-content;
}
.hp-marquee__track:hover {
    animation-play-state: paused;
}
@keyframes hpMarqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hp-marquee__item {
    font-family: var(--ppn-font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0 8px;
    flex-shrink: 0;
}
.hp-marquee__item--stat {
    color: var(--ppn-saffron);
    font-weight: 700;
}
.hp-marquee__item--review {
    color: rgba(255,255,255,0.7);
    font-style: italic;
}
.hp-marquee__item--benefit {
    color: rgba(255,255,255,0.6);
}
.hp-marquee__divider {
    color: rgba(255,255,255,0.2);
    padding: 0 6px;
    flex-shrink: 0;
}

/* ═══ 3. RITUALS WE PERFORM — Compact horizontal category cards ═══ */
.hp-rituals {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg);
}
.hp-rituals__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
/* Horizontal card: thumbnail left, text center, arrow right */
.hp-ritual-card {
    background: var(--ppn-white);
    border: 1px solid var(--ppn-border);
    border-radius: 14px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.hp-ritual-card:hover {
    border-color: rgba(232,115,26,0.25);
    box-shadow: 0 4px 20px rgba(123,31,46,0.05), 0 8px 28px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}
/* Square thumbnail with rounded corners */
.hp-ritual-card__thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ppn-bg-cream), var(--ppn-bg-cream-deep));
}
.hp-ritual-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8) contrast(1.05);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-ritual-card:hover .hp-ritual-card__thumb img {
    transform: scale(1.08);
}
/* Text body — takes remaining space */
.hp-ritual-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hp-ritual-card h3 {
    font-family: var(--ppn-font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ppn-charcoal);
    margin: 0;
    letter-spacing: -0.01em;
}
.hp-ritual-card p {
    font-family: var(--ppn-font-body);
    font-size: 0.78rem;
    color: var(--ppn-text-muted);
    line-height: 1.5;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Price + families count on one line */
.hp-ritual-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.hp-ritual-card__price {
    font-family: var(--ppn-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ppn-maroon);
}
.hp-ritual-card__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ppn-font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ppn-green);
}
.hp-ritual-card__count::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--ppn-green);
    border-radius: 50%;
    flex-shrink: 0;
}
/* Arrow indicator on the right */
.hp-ritual-card__arrow {
    font-size: 1.1rem;
    color: var(--ppn-text-muted);
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.2s, color 0.2s, transform 0.2s;
}
.hp-ritual-card:hover .hp-ritual-card__arrow {
    opacity: 1;
    color: var(--ppn-saffron);
    transform: translateX(3px);
}
/* "Not sure?" guidance block */
.hp-rituals__unsure {
    text-align: center;
    margin-top: 36px;
    padding: 28px 32px;
    background: var(--ppn-bg-cream);
    border-radius: var(--ppn-radius-lg);
    border: 1px solid var(--ppn-border);
}
.hp-rituals__unsure p {
    font-family: var(--ppn-font-body);
    font-size: 0.92rem;
    color: var(--ppn-charcoal);
    margin: 0 0 16px;
    line-height: 1.6;
}
.hp-hero__btn--sm {
    padding: 10px 22px;
    font-size: 0.78rem;
}

/* ═══ 4. HOW WE'LL GUIDE YOU ═══ */
.hp-how {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg-cream);
}
.hp-how__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 960px;
    margin: 0 auto;
}
.hp-how__step {
    text-align: center;
    padding: 0 12px;
}
.hp-how__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ppn-maroon);
    color: #fff;
    font-family: var(--ppn-font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(150,0,0,0.2);
}
.hp-how__step h3 {
    font-family: var(--ppn-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ppn-charcoal);
    margin: 0 0 8px;
}
.hp-how__step p {
    font-family: var(--ppn-font-body);
    font-size: 0.82rem;
    color: var(--ppn-text-muted);
    line-height: 1.65;
    margin: 0;
}
.hp-how__cta {
    text-align: center;
    margin-top: 40px;
}
.hp-how__note {
    display: block;
    font-family: var(--ppn-font-heading);
    font-size: 0.72rem;
    color: var(--ppn-text-muted);
    margin-top: 12px;
}

/* ═══ 5. POPULAR CEREMONIES (Product Cards — reuses shop ppn-pcard) ═══ */
.hp-ceremonies {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg);
}
/* Homepage override: 4 columns (shop default is 3) */
.ppn-shop-grid--hp {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* hp-cer-card styles removed — homepage uses ppn-pcard from design system now */

/* ═══ EMOTIONAL QUOTE — breathing room ═══ */
.hp-quote {
    padding: clamp(56px, 8vw, 96px) 0;
    background: var(--ppn-maroon-deep);
    position: relative;
    overflow: hidden;
}
.hp-quote::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: 200px;
    color: rgba(255,255,255,0.04);
    line-height: 1;
    pointer-events: none;
}
.hp-quote__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.hp-quote__inner p {
    font-family: var(--ppn-font-body);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-style: italic;
    color: #fff;
    line-height: 1.7;
    margin: 0 0 20px;
    opacity: 0.92;
}
.hp-quote__inner cite {
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 600;
    color: var(--ppn-saffron);
    letter-spacing: 0.02em;
}

/* ═══ 6. SACRED CITIES ═══ */
.hp-cities {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg);
}
.hp-cities__wrap {
    position: relative;
}
.hp-cities__scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.hp-cities__scroll::-webkit-scrollbar { display: none; }
.hp-city-card {
    flex: 0 0 220px;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--ppn-radius-lg);
    overflow: hidden;
    background: var(--ppn-white);
    border: 1px solid var(--ppn-border);
}
.hp-city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.hp-city-card__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ppn-bg-cream);
}
.hp-city-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: saturate(0.85) contrast(1.04);
}
.hp-city-card:hover .hp-city-card__img img { transform: scale(1.06); }
.hp-city-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ppn-maroon-deep), var(--ppn-maroon));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ppn-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}
.hp-city-card__name {
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ppn-charcoal);
    margin: 0;
    padding: 10px 14px 12px;
    text-align: center;
}
.hp-cities__note {
    text-align: center;
    margin-top: 20px;
    font-family: var(--ppn-font-body);
    font-size: 0.82rem;
    color: var(--ppn-text-muted);
}
.hp-cities__note a {
    color: var(--ppn-maroon);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══ 6. FAMILIES WE'VE SERVED — horizontal scroll carousel ═══ */
.hp-testi {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg-cream);
}
.hp-testi__wrap {
    position: relative;
}
.hp-testi__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 4px 0 8px;
}
.hp-testi__track::-webkit-scrollbar { display: none; }
.hp-testi__card {
    flex: 0 0 280px;
    background: var(--ppn-white);
    border: 1px solid var(--ppn-border);
    border-radius: 12px;
    padding: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: box-shadow 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
}
.hp-testi__card:hover {
    box-shadow: 0 4px 20px rgba(123,31,46,0.07), 0 8px 32px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}
/* Chevron buttons */
.hp-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ppn-white);
    border: 1px solid var(--ppn-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: box-shadow 0.2s, transform 0.2s;
}
.hp-scroll-btn:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-50%) scale(1.05);
}
.hp-scroll-btn svg {
    width: 16px;
    height: 16px;
    color: var(--ppn-charcoal);
}
.hp-scroll-btn--prev { left: -20px; }
.hp-scroll-btn--next { right: -20px; }
/* Decorative quotation mark */
.hp-testi__quote-mark {
    position: absolute;
    top: -4px;
    right: 16px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--ppn-maroon);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}
.hp-testi__stars {
    color: #d4940a;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}
.hp-testi__text {
    font-family: var(--ppn-font-body);
    font-size: 0.82rem;
    font-style: normal;
    color: var(--ppn-text);
    line-height: 1.65;
    margin: 0 0 auto;
    padding-bottom: 14px;
}
.hp-testi__cite {
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--ppn-border);
    margin-top: auto;
}
/* Initials fallback avatar */
.hp-testi__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ppn-bg-cream), var(--ppn-bg-cream-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ppn-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ppn-maroon);
    flex-shrink: 0;
}
/* Photo avatar — ceremony image as small circle */
.hp-testi__avatar--photo {
    background: none;
    overflow: hidden;
    border: 2px solid var(--ppn-bg-cream-deep);
}
.hp-testi__avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-testi__cite-text strong {
    display: block;
    font-family: var(--ppn-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ppn-charcoal);
}
.hp-testi__cite-text span {
    display: block;
    font-family: var(--ppn-font-heading);
    font-size: 0.65rem;
    color: var(--ppn-text-muted);
    margin-top: 1px;
}

/* ═══ 7. NRI SECTION — Compact Centered Card ═══ */
.hp-nri {
    padding: var(--ppn-section-pad) 0;
    background: transparent;
}
.hp-nri__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    background: linear-gradient(145deg, #fdf8f3 0%, #faf0e4 40%, #f5e6d3 100%);
    border: 1px solid rgba(150, 0, 0, 0.06);
    border-radius: 20px;
    box-shadow:
        0 4px 24px rgba(123, 31, 46, 0.05),
        0 16px 48px rgba(232, 115, 26, 0.04);
    padding: 36px 40px;
    position: relative;
    overflow: hidden;
}
.hp-nri__left {
    text-align: left;
}
.hp-nri__left .hp-eyebrow { margin-bottom: 8px; }
.hp-nri__right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Subtle decorative corner accent */
.hp-nri__inner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(232, 115, 26, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hp-nri .hp-eyebrow {
    color: var(--ppn-saffron-deep);
    position: relative;
    z-index: 1;
}
.hp-nri__title {
    font-family: var(--ppn-font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
    font-weight: 700;
    color: var(--ppn-charcoal);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.hp-nri__sub {
    font-family: var(--ppn-font-body);
    font-size: 0.85rem;
    color: var(--ppn-text-muted);
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 440px;
}

/* Pills */
.hp-nri__pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.hp-nri__pill {
    padding: 5px 14px;
    background: rgba(150, 0, 0, 0.04);
    border: 1px solid rgba(150, 0, 0, 0.1);
    border-radius: var(--ppn-radius-pill);
    font-family: var(--ppn-font-heading);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ppn-maroon);
    letter-spacing: 0.01em;
}

/* CTA button — warm maroon */
.hp-nri__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--ppn-maroon);
    color: #fff;
    border-radius: var(--ppn-radius-pill);
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s var(--ppn-ease), box-shadow 0.2s var(--ppn-ease), background 0.2s;
}
.hp-nri__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(150, 0, 0, 0.2);
    background: var(--ppn-maroon-hover);
    color: #fff;
}

/* Benefits — compact 2-column grid */
.hp-nri__signals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
.hp-nri__signal {
    display: flex;
    gap: 8px;
    align-items: center;
    text-align: left;
}
.hp-nri__signal-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hp-nri__signal-icon svg {
    width: 10px;
    height: 10px;
    color: var(--ppn-green);
}
.hp-nri__signal span:last-child {
    font-family: var(--ppn-font-heading);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ppn-charcoal);
    line-height: 1.35;
}

/* NRI YouTube inline text link */
.hp-nri__yt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: var(--ppn-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ppn-maroon);
    text-decoration: none;
    transition: color 0.2s, gap 0.3s var(--ppn-ease);
}
.hp-nri__yt-link svg:first-child {
    color: #ff0000;
    flex-shrink: 0;
}
.hp-nri__yt-link svg:last-child {
    transition: transform 0.3s var(--ppn-ease);
}
.hp-nri__yt-link:hover {
    color: var(--ppn-maroon-hover);
}
.hp-nri__yt-link:hover svg:last-child {
    transform: translateX(3px);
}

/* ═══ 8. OUR PANDITS ═══ */
.hp-pandits {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg);
}
.hp-pandits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.hp-pdt-card {
    background: var(--ppn-white);
    border: 1px solid var(--ppn-border);
    border-radius: var(--ppn-radius-lg);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.hp-pdt-card:hover {
    border-color: rgba(232,115,26,0.2);
    box-shadow: var(--ppn-shadow-md);
    transform: translateY(-3px);
}
.hp-pdt-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ppn-bg-cream), var(--ppn-bg-cream-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hp-pdt-card__icon svg {
    width: 20px;
    height: 20px;
    color: var(--ppn-saffron);
}
.hp-pdt-card h4 {
    font-family: var(--ppn-font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ppn-charcoal);
    margin: 0 0 4px;
}
.hp-pdt-card p {
    font-family: var(--ppn-font-body);
    font-size: 0.78rem;
    color: var(--ppn-text-muted);
    line-height: 1.6;
    margin: 0;
}
.hp-pandits__gst {
    text-align: center;
    margin-top: 28px;
    font-family: var(--ppn-font-heading);
    font-size: 0.72rem;
    color: var(--ppn-text-muted);
}
.hp-pandits__gst strong {
    color: var(--ppn-charcoal);
}

/* ═══ 9. FAQ ═══ */
.hp-faq {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg-cream);
}
.hp-faq__list {
    max-width: 750px;
    margin: 0 auto;
}
.hp-faq__item {
    background: var(--ppn-white);
    border: 1px solid var(--ppn-border);
    border-radius: var(--ppn-radius-md);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.hp-faq__item[open] { border-color: var(--ppn-saffron); }
.hp-faq__item summary {
    padding: 18px 20px;
    font-family: var(--ppn-font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ppn-charcoal);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: color 0.15s;
}
.hp-faq__item summary:hover { color: var(--ppn-maroon); }
.hp-faq__item summary::-webkit-details-marker { display: none; }
.hp-faq__chevron {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}
.hp-faq__item[open] .hp-faq__chevron {
    background: var(--ppn-saffron);
    transform: rotate(180deg);
}
.hp-faq__chevron svg {
    width: 14px;
    height: 14px;
    color: var(--ppn-text-muted);
    transition: color 0.2s;
}
.hp-faq__item[open] .hp-faq__chevron svg { color: #fff; }
.hp-faq__answer {
    padding: 0 20px 20px;
    font-family: var(--ppn-font-body);
    font-size: 0.88rem;
    color: var(--ppn-charcoal);
    opacity: 0.75;
    line-height: 1.8;
}
.hp-faq__answer p { margin: 0; }

/* ═══ 10. FINAL CTA — Horizontal banner ═══ */
.hp-endcta {
    padding: var(--ppn-section-pad) 0;
    background: var(--ppn-bg);
}
.hp-endcta__card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    background: linear-gradient(135deg, var(--ppn-maroon-deep), var(--ppn-maroon));
    border-radius: 16px;
    padding: 36px 44px;
    box-shadow: 0 12px 40px rgba(150,0,0,0.18);
}
.hp-endcta__text {
    text-align: left;
}
.hp-endcta__eyebrow {
    font-family: var(--ppn-font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ppn-saffron);
    margin: 0 0 8px;
}
.hp-endcta__card h2 {
    font-family: var(--ppn-font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    text-wrap: balance;
}
.hp-endcta__text > p {
    font-family: var(--ppn-font-body);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin: 0;
    max-width: 440px;
}
.hp-endcta__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}
.hp-endcta__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.hp-endcta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--ppn-radius-pill);
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    white-space: nowrap;
}
.hp-endcta__btn:active { transform: scale(0.97); }
.hp-endcta__btn--wa {
    background: #fff;
    color: var(--ppn-maroon);
}
.hp-endcta__btn--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,255,255,0.2);
    color: var(--ppn-maroon);
}
.hp-endcta__btn--call {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
}
.hp-endcta__btn--call:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.hp-endcta__trust {
    display: flex;
    gap: 16px;
    font-family: var(--ppn-font-heading);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
}

/* ═══ ENQUIRY FORM WRAPPER ═══ */
.hp-enquiry {
    padding: 48px 0;
    background: var(--ppn-bg-cream);
}

/* ═══ BLOG ═══ */
.hp-blog {
    padding: clamp(40px, 5vw, 56px) 0;
    background: var(--ppn-bg);
}
.hp-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.hp-blog-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s;
}
.hp-blog-card:hover { transform: translateY(-3px); }
.hp-blog-card__img {
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--ppn-radius-md);
}
.hp-blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.hp-blog-card:hover .hp-blog-card__img img { transform: scale(1.04); }
.hp-blog-card__body { padding: 14px 0 0; }
.hp-blog-card__date {
    font-family: var(--ppn-font-heading);
    font-size: 0.68rem;
    color: var(--ppn-text-muted);
    margin-bottom: 6px;
}
.hp-blog-card h3 {
    font-family: var(--ppn-font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ppn-charcoal);
    margin: 0;
    line-height: 1.4;
}

/* ═══ VIEW ALL LINKS ═══ */
.hp-viewall {
    text-align: center;
    margin-top: 28px;
}
.hp-viewall a {
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ppn-maroon);
    text-decoration: none;
    padding: 12px 28px;
    border: 1.5px solid var(--ppn-maroon);
    border-radius: var(--ppn-radius-pill);
    display: inline-block;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.hp-viewall a:hover {
    background: var(--ppn-maroon);
    color: #fff;
    transform: translateY(-1px);
}

/* ═══ MOBILE STICKY BAR ═══ */
.hp-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--ppn-white);
    border-top: 2px solid var(--ppn-maroon);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
}
.hp-mobile-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    border-radius: var(--ppn-radius-pill);
    font-family: var(--ppn-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 48px;
}
.hp-mobile-bar__call {
    color: var(--ppn-maroon);
    border: 1.5px solid var(--ppn-maroon);
    background: transparent;
}
.hp-mobile-bar__wa {
    background: #25D366;
    color: #fff;
}

/* ═══ HERO TEXT REVEAL ANIMATION ═══ */
.hp-hero__kicker {
    animation: hpFadeUp 0.6s 0.2s both;
}
.hp-hero__title {
    animation: hpFadeUp 0.7s 0.4s both;
}
.hp-hero__sub {
    animation: hpFadeUp 0.6s 0.6s both;
}
.hp-search-trigger {
    animation: hpFadeUp 0.6s 0.7s both;
}
.hp-hero__ctas {
    animation: hpFadeUp 0.6s 0.8s both;
}
.hp-hero__sidebar {
    animation: hpFadeUp 0.7s 0.5s both;
}
@keyframes hpFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hpLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* ═══ SCROLL PROGRESS BAR (top of page) ═══ */
.hp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ppn-maroon), var(--ppn-saffron));
    width: 0%;
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ═══ SCROLL ANIMATIONS ═══ */
[data-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0, 0, 0.2, 1), transform 0.65s cubic-bezier(0, 0, 0.2, 1);
}
[data-anim].shown { opacity: 1; transform: none; }
[data-anim-d="1"] { transition-delay: 0.06s; }
[data-anim-d="2"] { transition-delay: 0.12s; }
[data-anim-d="3"] { transition-delay: 0.18s; }
[data-anim-d="4"] { transition-delay: 0.24s; }
[data-anim-d="5"] { transition-delay: 0.30s; }

/* ═══ REWARDING INTERACTIONS ═══ */

/* Section title underline wipe reveal */
.hp-stitle {
    position: relative;
    display: inline-block;
}
.hp-stitle::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--ppn-maroon), var(--ppn-saffron));
    border-radius: 1px;
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-stitle--revealed::after {
    transform: translateX(-50%) scaleX(1);
}
.hp-section-header .hp-stitle { display: block; }
.hp-section-header .hp-stitle::after { left: 50%; }

/* CTA button hover ripple */
.hp-hero__btn,
.hp-endcta__btn,
.hp-nri__btn {
    position: relative;
    overflow: hidden;
}
.hp-hero__btn::after,
.hp-endcta__btn::after,
.hp-nri__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.hp-hero__btn:hover::after,
.hp-endcta__btn:hover::after,
.hp-nri__btn:hover::after {
    opacity: 1;
}

/* FAQ item open/close smooth */
.hp-faq__answer {
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card image shimmer on load (hp-cer-card removed) */
.hp-city-card__img img,
.hp-ritual-card__thumb img {
    background: linear-gradient(90deg, #f0ede8 25%, #e8e2da 50%, #f0ede8 75%);
    background-size: 200% 100%;
    animation: hpShimmer 1.5s infinite;
}
@keyframes hpShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ritual card booking count pulse */
.hp-ritual-card__count::before {
    animation: hpCountPulse 2s ease-in-out infinite;
}
@keyframes hpCountPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Testimonial card subtle entrance */
.hp-testi__card {
    transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.5s ease;
}

/* Stats counter flash color (triggered by JS) */
.hp-hero__stat-num {
    transition: color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══ FOCUS VISIBLE ═══ */
:focus-visible {
    outline: 2.5px solid var(--ppn-saffron);
    outline-offset: 3px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═══ TEXT-WRAP BALANCE ═══ */
.hp-stitle, .hp-hero__title, .hp-endcta__card h2 { text-wrap: balance; }

/* ═══ RESPONSIVE ═══ */

/* Tablet */
@media (max-width: 1024px) {
    .hp-hero__layout { grid-template-columns: 1fr 300px; gap: 32px; }
    .ppn-shop-grid--hp { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hp-pandits__grid { grid-template-columns: repeat(2, 1fr); }
    .hp-nri__inner { padding: 28px 28px; gap: 24px; }
    .hp-nri__signals { grid-template-columns: 1fr 1fr; }
    .hp-mobile-bar { display: flex; }
    .hp-scroll-btn { display: none; }
    .hp-testi__card { flex: 0 0 270px; }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .hp-hero__layout { grid-template-columns: 1fr; gap: 24px; }
    .hp-hero__inner { padding: 32px 0 24px; }
    .hp-hero__title { font-size: 1.6rem; }
    .hp-hero__sub { font-size: 0.85rem; margin-bottom: 16px; }
    .hp-search-trigger { max-width: 100%; }
    .hp-hero__sidebar { flex-direction: row; gap: 12px; }
    .hp-ticker { flex: 1; }
    .hp-hero__stats { flex: 1; }
    .hp-hero__stat-num { font-size: 1.1rem; }
    .hp-marquee__item { font-size: 0.68rem; }

    .hp-rituals__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .hp-ritual-card__thumb {
        width: 68px;
        height: 68px;
    }
    .ppn-shop-grid--hp { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hp-how__grid { grid-template-columns: 1fr; gap: 20px; }
    .hp-pandits__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 14px;
    }
    .hp-pandits__grid::-webkit-scrollbar { display: none; }
    .hp-pdt-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    .hp-testi__card { flex: 0 0 260px; }
    .hp-nri__inner { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
    .hp-nri__left { text-align: center; }
    .hp-nri__pills { justify-content: center; }
    .hp-nri__signals { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .hp-nri__btn { width: 100%; justify-content: center; }
    .hp-nri__yt-link { justify-content: center; }

    .hp-endcta__card { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
    .hp-endcta__text { text-align: center; }
    .hp-endcta__text > p { max-width: none; }
    .hp-endcta__actions { align-items: stretch; }
    .hp-endcta__trust { justify-content: center; }

    /* Sections padding tighter on mobile */
    .hp-rituals, .hp-how, .hp-ceremonies, .hp-cities,
    .hp-testi, .hp-pandits, .hp-faq, .hp-endcta {
        padding: clamp(36px, 5vw, 56px) 0;
    }
    .hp-section-header .hp-ssub { margin-bottom: 24px; }

    /* Quote section compact */
    .hp-quote { padding: 40px 0; }
    .hp-quote__inner p { font-size: 1rem; }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .hp-hero__inner { padding: 24px 0 20px; }
    .hp-hero__title { font-size: 1.35rem; line-height: 1.2; }
    .hp-hero__kicker { font-size: 0.62rem; margin-bottom: 10px; }
    .hp-hero__sub { font-size: 0.8rem; }
    .hp-hero__ctas { flex-direction: column; gap: 8px; }
    .hp-hero__btn { width: 100%; justify-content: center; padding: 12px 20px; }
    .hp-hero__sidebar { flex-direction: column; }
    .hp-hero__stat-num { font-size: 1rem; }
    .hp-hero__stat-label { font-size: 0.52rem; }
    .hp-ticker { padding: 10px 14px; }
    .hp-ticker__msg { font-size: 0.72rem; }
    .hp-search-trigger { padding: 10px 16px; font-size: 0.82rem; }

    .hp-stitle { font-size: 1.2rem; }
    .hp-ssub { font-size: 0.82rem; margin-bottom: 20px; }
    .hp-eyebrow { font-size: 0.62rem; }

    .hp-ritual-card { padding: 12px; gap: 12px; }
    .hp-ritual-card__thumb { width: 60px; height: 60px; border-radius: 10px; }
    .hp-ritual-card h3 { font-size: 0.85rem; }
    .hp-ritual-card p { font-size: 0.72rem; }
    .hp-ritual-card__price { font-size: 0.72rem; }
    .hp-ritual-card__arrow { font-size: 0.95rem; }
    .hp-testi__card { flex: 0 0 240px; padding: 16px; }
    .hp-pdt-card { flex: 0 0 250px; }
    .hp-city-card { flex: 0 0 170px; }
    .hp-city-card__img { width: 100%; }

    .hp-endcta__card { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; text-align: center; }
    .hp-endcta__text { text-align: center; }
    .hp-endcta__text > p { max-width: none; }
    .hp-endcta__actions { align-items: stretch; }
    .hp-endcta__btns { flex-direction: column; }
    .hp-endcta__btn { width: 100%; }
    .hp-endcta__trust { justify-content: center; flex-wrap: wrap; }

    .hp-how__step { padding: 0; }
    .hp-faq__list { margin: 0 -8px; }
}

/* Tiny screens */
@media (max-width: 375px) {
    .hp-hero__title { font-size: 1.15rem; }
    .hp-ritual-card { padding: 10px; gap: 10px; }
    .hp-ritual-card__thumb { width: 52px; height: 52px; }
    .hp-city-card { flex: 0 0 150px; }
    .hp-hero__stat { padding: 10px 6px; }
    .hp-marquee__item { font-size: 0.62rem; }
}

/* ═══ FESTIVAL URGENCY BANNER ═══ */
.hp-festival-banner {
    background: linear-gradient(135deg, #960000 0%, #7b1f2e 100%);
    color: #fff;
    padding: 10px 0;
    font-family: var(--ppn-font-heading);
    font-size: 0.82rem;
    font-weight: 500;
    position: relative;
    z-index: 10;
}
.hp-festival-banner__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hp-festival-banner__dot {
    width: 8px;
    height: 8px;
    background: #25D366;
    border-radius: 50%;
    flex-shrink: 0;
    animation: hpLivePulse 2s ease-in-out infinite;
}
.hp-festival-banner__text {
    color: rgba(255,255,255,0.9);
}
.hp-festival-banner__text strong {
    color: #fff;
    font-weight: 700;
}
.hp-festival-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 4px 14px;
    border-radius: var(--ppn-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}
.hp-festival-banner__cta:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ═══ ANIMATED SEARCH BAR ═══ */
.hp-hero__search {
    display: flex;
    align-items: center;
    max-width: 440px;
    margin-top: 18px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--ppn-radius-pill);
    overflow: hidden;
    transition: border-color 0.25s, background 0.25s;
}
.hp-hero__search:focus-within {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}
.hp-hero__search-icon {
    flex-shrink: 0;
    margin-left: 14px;
    color: rgba(255,255,255,0.5);
}
.hp-hero__search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 10px 12px;
    color: #fff;
    font-family: var(--ppn-font-heading);
    font-size: 0.85rem;
    font-weight: 400;
}
.hp-hero__search-input::placeholder {
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
}
.hp-hero__search-input:focus::placeholder {
    color: rgba(255,255,255,0.35);
}
.hp-hero__search-btn {
    flex-shrink: 0;
    background: var(--ppn-saffron);
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-family: var(--ppn-font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.hp-hero__search-btn:hover {
    background: #d06a15;
}

/* ═══ TRUST BADGES BAR ═══ */
.hp-trust-badges {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 18px 24px;
    background: #fff;
    border-radius: var(--ppn-radius-md);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hp-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ppn-font-heading);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ppn-text-muted);
    white-space: nowrap;
}
.hp-trust-badge svg {
    color: #25D366;
    flex-shrink: 0;
}

/* ═══ MOBILE — NEW FEATURES ═══ */
@media (max-width: 768px) {
    .hp-festival-banner { font-size: 0.72rem; padding: 8px 0; }
    .hp-festival-banner__inner { gap: 6px; text-align: center; }
    .hp-festival-banner__cta { font-size: 0.68rem; padding: 3px 10px; }

    .hp-hero__search { max-width: 100%; margin-top: 14px; }
    .hp-hero__search-input { font-size: 0.8rem; padding: 8px 10px; }
    .hp-hero__search-btn { padding: 8px 14px; font-size: 0.75rem; }

    .hp-trust-badges { gap: 12px; padding: 14px 16px; }
    .hp-trust-badge { font-size: 0.7rem; gap: 6px; }
    .hp-trust-badge svg { width: 16px; height: 16px; }
}

@media (max-width: 375px) {
    .hp-trust-badges { flex-direction: column; gap: 8px; align-items: flex-start; }
}