/* G.I.F.T. Bharat Core Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:wght@300;400;500;700&family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Mukta:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

/* --- Resets & Setup --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    transition: background-color 0.5s ease, color 0.5s ease, font-family 0.5s ease;
    overflow-x: hidden;
    position: relative;
}

/* Base Mandala Background Texture */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 100vh;
    background-image: url('../assets/mandala_pattern.png');
    background-repeat: repeat;
    background-size: 800px;
    opacity: var(--mandala-opacity);
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 1rem;
    transition: color 0.5s ease, font-family 0.5s ease;
}

p {
    margin-bottom: 1.5rem;
    font-weight: 400;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent);
}

/* --- Layout Wrappers --- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section {
    padding: 5rem 0;
    position: relative;
}

/* --- Header & Navigation --- */
header {
    background: var(--color-surface-trans);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1rem;
}

/* Never let the nav row's flex-shrink squeeze the logo — with 6 links plus
   the theme/language/sign-in cluster, the row can overflow on medium
   desktop widths, and without this the logo was the one getting compressed */
.logo {
    flex-shrink: 0;
}

.logo a {
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
    white-space: nowrap;
}

.logo span.tagline {
    font-size: 0.75rem;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text-light);
    letter-spacing: 0px;
    margin-top: -3px;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.7rem;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    padding: 0.5rem 0;
    white-space: nowrap;
}

/* Groups the theme/language/sign-in widgets into one visually distinct
   cluster, set apart from the plain text links by a hairline divider */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-left: 1.5rem;
    margin-left: 0.3rem;
    border-left: 1px solid var(--color-border);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* --- Theme Switcher Widget --- */
.theme-switcher {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.3rem;
    border-radius: 30px;
    border: 1px solid var(--color-border);
    gap: 0.2rem;
}

.theme-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    color: var(--color-text-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-btn:hover {
    color: var(--color-text);
}

/* Active Theme Button States */
.theme-velvet-night-btn.active {
    background: #ff2a85;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 42, 133, 0.4);
}

.theme-morning-blues-btn.active {
    background: #2f6fb0;
    color: #ffffff;
}

/* Language & Sign-in controls, sharing the switcher pill's visual language */
.lang-switcher {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.3rem;
    border-radius: 30px;
    border: 1px solid var(--color-border);
    gap: 0.2rem;
}

.lang-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    color: var(--color-text-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn:hover {
    color: var(--color-text);
}

.lang-btn.active {
    background: var(--color-primary);
    color: #ffffff;
}

.signin-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 20px;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.signin-btn:hover {
    background: var(--color-secondary);
    color: var(--color-bg);
}

/* Sign-in placeholder modal */
.signin-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.signin-modal-overlay.active {
    display: flex;
}

.signin-modal {
    background: var(--color-surface);
    border-radius: 8px;
    padding: 2.5rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.signin-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-text-light);
    cursor: pointer;
}

.signin-modal h3 {
    margin-bottom: 0.8rem;
}

.signin-modal p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Generic language toggle — pairs of inline spans, one per language, live
   inside whatever structural element already carries the layout/animation,
   so swapping text never fights that element's own display/animation rules */
.i18n-hi {
    display: none;
}

html.lang-hi .i18n-en {
    display: none;
}

html.lang-hi .i18n-hi {
    display: inline;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-text);
}

/* --- Hero Section --- */
.hero {
    background: var(--hero-overlay);
    position: relative;
    padding: 6rem 0;
    min-height: 85vh;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.5s ease;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.hero-text {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.hero-meta {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--color-secondary);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hero-meta::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 1px;
    background-color: var(--color-secondary);
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.hero-tagline {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    max-width: 90%;
    font-family: var(--font-heading);
    font-style: italic;
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 2.5rem;
    max-width: 95%;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.9rem 2rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-btn-bg);
    color: var(--color-btn-text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: var(--color-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Hero Image Container with traditional frame */
.hero-image-container {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.3s forwards;
}

.hero-frame {
    position: relative;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: 200px 200px 0 0; /* Arch pattern */
    box-shadow: var(--theme-card-shadow), 0 20px 50px rgba(0,0,0,0.08);
    border: 1px solid var(--color-border);
    transition: all 0.5s ease;
}

.hero-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--color-secondary);
    border-radius: 192px 192px 0 0;
    pointer-events: none;
    transition: border-color 0.5s ease;
}

.hero-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 184px 184px 0 0;
    display: block;
    animation: floatImage 6s ease-in-out infinite;
}

/* Decorative absolute badges */
.hero-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--color-surface);
    border: 1px solid var(--color-secondary);
    padding: 1.2rem;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    z-index: 2;
    animation: floatBadge 5s ease-in-out infinite;
}

.hero-badge span.accent-char {
    font-size: 2rem;
    color: var(--color-primary);
    line-height: 1;
    font-family: var(--font-heading);
}

.hero-badge span.label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
}

/* --- Features & Content Section --- */
.text-center {
    text-align: center;
}

.max-w-medium {
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.section-title {
    font-size: 2.6rem;
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.section-title::after {
    content: '◆';
    display: block;
    font-size: 0.8rem;
    color: var(--color-secondary);
    text-align: center;
    margin-top: 0.5rem;
    letter-spacing: 5px;
}

/* The brand promise lockup — a bold lede above the philosophy paragraphs */
.philosophy-lede {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    color: var(--color-primary);
}

/* Larger treatment for the "Great Indian Finest Traditions" heading and
   its lede, used only on the home philosophy section */
.section-title-large {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.philosophy-lede-large {
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    margin-bottom: 1.5rem;
}

/* Philosophy paragraphs — a touch larger, generous line-height for readability,
   with bold phrases picked out in the brand's secondary accent */
.philosophy-text {
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--color-text-light);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* This paragraph reads in the page's main text color (white/cream on the
   dark themes) rather than the muted text-light tone, per request */
.philosophy-text-white {
    color: var(--color-text);
}

/* A deliberate, sparing gold highlight for specific named phrases */
.text-gold {
    color: var(--color-secondary);
    font-weight: 700;
}

/* Page button strip — quiet links to the other 4 pages, each with a one-line hint */
.page-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3.5rem;
}

/* Styled as real buttons/portals — solid color fill, an arrow that nudges
   on hover, and a lift+shadow so they read as clickable, not just text */
.page-strip-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.8rem 2rem 1.8rem 1.6rem;
    border-radius: 10px;
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-btn-hover) 100%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.page-strip-item::after {
    content: '\2192';
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: #ffffff;
    opacity: 0.55;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.page-strip-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
}

.page-strip-item:hover::after {
    transform: translateY(-50%) translateX(4px);
    opacity: 1;
}

.page-strip-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
    padding-right: 1.5rem;
}

.page-strip-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .page-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .page-strip {
        grid-template-columns: 1fr;
    }
}

/* --- Offerings: Gift Finder + the Twelve Category Houses --- */

.offer-search-input {
    width: 100%;
    max-width: 620px;
    padding: 1rem 1.6rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: 30px;
    background: var(--color-surface);
    color: var(--color-text);
    margin: 0 auto;
    display: block;
    box-shadow: var(--theme-card-shadow);
    transition: border-color 0.3s ease;
}

.offer-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.offer-no-results {
    margin-top: 1.5rem;
    color: var(--color-text-light);
    font-style: italic;
    display: none;
}

.offer-panel {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2.5rem 2rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.offer-panel.in-view {
    opacity: 1;
    transform: translateY(0);
}

.offer-panel:nth-child(odd) {
    background: var(--color-surface);
}

.offer-panel:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

.offer-panel-num {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-secondary);
    opacity: 0.5;
    min-width: 70px;
    line-height: 1;
}

.offer-panel-name {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.offer-panel-deva {
    font-family: 'Tiro Devanagari Hindi', serif;
    font-size: 1.3rem;
    color: var(--color-secondary);
}

.offer-panel-gloss {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
}

.offer-panel-desc {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.offer-panel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.offer-chip {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .offer-panel {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 1.5rem;
    }
    .offer-panel-num {
        font-size: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offer-panel {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Journey CTA — italic secondary heading, and a quieter arrow-led steps line */
.cta-subheading {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    color: var(--color-secondary);
    margin-top: -1rem;
}

.cta-steps {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

.intro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin-top: 3.5rem;
}

/* Cards & Glassmorphism Panels */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 2.5rem 2rem;
    border-radius: 4px;
    box-shadow: var(--theme-card-shadow);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--color-secondary);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-primary);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}

.card:hover::before {
    transform: scaleY(1);
}

.card-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    line-height: 1;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.card-text {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* --- About Us Specific layouts --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.highlight-box {
    border-left: 2px solid var(--color-secondary);
    padding-left: 1.2rem;
}

.highlight-box h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.highlight-box p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

.quote-block {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--color-primary);
    border-left: 4px solid var(--color-secondary);
    padding-left: 2rem;
    margin: 3rem 0;
    font-style: italic;
}

.quote-author {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-light);
    margin-top: 0.8rem;
}

/* --- Connect & Forms --- */

/* Contact details, laid out as a responsive grid below the curation form
   (previously a narrow sidebar column beside the form) */
.curators-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}

.contact-detail-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.2rem;
}

.detail-icon {
    font-size: 1.8rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.detail-content h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text);
}

.detail-content p, .detail-content a {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-light);
    transition: all 0.3s ease;
}

.social-icon:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface);
}

/* Intake Form Stylings */
.intake-form-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 3rem;
    border-radius: 4px;
    box-shadow: var(--theme-card-shadow);
}

.form-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.form-input, .form-select, .form-textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
}

.checkbox-group {
    margin-bottom: 1.5rem;
}

.checkbox-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text);
    margin-bottom: 0.8rem;
    display: block;
}

.checkbox-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* --- Blogs Grid --- */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.blog-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--theme-card-shadow);
    transition: all 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.blog-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

.blog-content {
    padding: 1.8rem;
}

.blog-date {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 0.6rem;
    display: block;
}

.blog-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.blog-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 1.2rem;
}

.blog-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-link::after {
    transform: translateX(4px);
}

/* --- Footer --- */
/* Fixed mitti-brown ground, matching the peacock emblem — deliberately not
   tied to the active theme's --color-primary, so it stays the same warm
   espresso tone regardless of Velvet Night / Morning Blues */
footer {
    background: linear-gradient(160deg, #3d2c1c 0%, #2a1f16 55%, #1b130c 100%);
    color: #ffffff;
    padding: 5rem 0 2rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Brand mark, repeated above the footer content — peacock beside the
   stacked wordmark, same lockup as the hero, adapted for the footer's
   solid brand-colored ground instead of the dark hero backdrop */
.footer-brandmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

/* A gold frame around the emblem so its own dark ground reads as an
   intentional framed medallion, not a stray dark patch on the footer */
.footer-emblem-frame {
    padding: 5px;
    background: linear-gradient(160deg, #E6CD8B 0%, #C5A45A 50%, #9C7C3A 100%);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.footer-emblem-img {
    display: block;
    width: 64px;
    height: auto;
    border-radius: 7px;
}

.footer-emblem-title {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-emblem-line {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e8c874;
}

/* Quote strip — a slogan-fonted band above the footer's contact grid */
.footer-quote-strip {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem auto;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Upright, not italic — matches the tagline fix above for clearer reading */
.footer-quote-line {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: #e8c874;
    margin-bottom: 0.4rem;
}

.footer-quote-sanskrit {
    font-family: 'Tiro Devanagari Hindi', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #d4af37;
    margin-top: 1rem;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

@media (max-width: 480px) {
    .footer-brandmark {
        flex-direction: column;
        text-align: center;
    }
    .footer-emblem-title {
        text-align: center;
    }
}

footer h3, footer h4 {
    color: #ffffff;
}

footer a {
    color: rgba(255,255,255,0.7);
}

footer a:hover {
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    max-width: 90%;
    margin-top: 1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    font-size: 0.95rem;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links a:hover {
    transform: translateX(4px);
}

.footer-contact p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.8rem;
}

.footer-contact span.contact-label {
    font-weight: 600;
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.disclaimer {
    max-width: 60%;
    line-height: 1.4;
}

/* --- Animations --- */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatImage {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

/* --- Responsive Adaptations --- */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }
    .intro-grid, .blogs-grid, .curators-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    .footer-brand {
        grid-column: span 2;
    }
}

/* The nav row now carries 5 page links plus the theme/language/sign-in
   cluster — too dense to fit comfortably at typical laptop widths without
   squeezing the logo. Collapse to the mobile menu earlier than the general
   768px content breakpoint, so the header itself never looks cramped. */
@media (max-width: 1150px) {
    .nav-menu {
        display: none; /* Mobile menu toggled by JS */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        padding: 2rem;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        gap: 1.5rem;
    }
    .nav-menu.active {
        display: flex;
    }
    .nav-controls {
        flex-wrap: wrap;
        padding-left: 0;
        padding-top: 1.2rem;
        margin-left: 0;
        border-left: none;
        border-top: 1px solid var(--color-border);
        width: 100%;
    }
    .mobile-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 3.5rem 0;
    }
    .header-container {
        padding: 1rem;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    .hero-meta {
        justify-content: center;
    }
    .hero-meta::before {
        display: none;
    }
    .hero-tagline {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-image-container {
        max-width: 320px;
        margin: 0 auto;
    }
    .intro-grid, .blogs-grid, .about-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .about-highlights, .curators-details-grid {
        grid-template-columns: 1fr;
    }
    .intake-form-wrapper {
        padding: 2rem 1.5rem;
    }
    .form-group-row, .checkbox-options {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        grid-column: span 1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .disclaimer {
        max-width: 100%;
    }
}

/* Switcher pill needs a lighter track on the dark Velvet Night background */
.theme-velvet-night .theme-switcher,
.theme-velvet-night .lang-switcher {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(253, 161, 201, 0.25);
}

/* ==========================================================================
   HERITAGE LUXE — DIRECTION 01 · INDIGO & BRASS
   Ceremonial homepage hero, per the G.I.F.T. Bharat Design System v1.0.
   Self-contained: carries its own tokens so it renders faithfully regardless
   of the active palette. Proportion held ~70% indigo/ivory · 20% brass ·
   10% rose — the gold stays scarce, the rose reserved for the heart.
   ========================================================================== */
.hl-hero {
    --hl-indigo: #0c0714;        /* Near-black with a purple tinge — primary ground */
    --hl-indigo-deep: #020103;   /* true near-black for gradient falloff */
    --hl-indigo-lift: #180f28;   /* the "tinge" — a dark purple glimpsed under the sheen */
    --hl-brass: #C5A45A;         /* Antique Brass — the constant accent */
    --hl-brass-light: #E6CD8B;   /* Brass Light — highlights, italic emphasis */
    --hl-brass-deep: #9C7C3A;    /* Brass Deep — fine type, dividers */
    --hl-ivory: #F1E9D6;         /* Ivory Khadi — type on dark */
    --hl-blush: #e0688f;         /* Deep rose pink — the tagline's resting color, richer than the earlier light blush */
    --hl-rose: #ff2a85;          /* The site's dark pink accent (Rani Pink) — hover & heart */

    position: relative;
    isolation: isolate;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6rem, 12vw, 9rem) 0;
    /* Blackish ground with just a tinge of royal purple: edge vignette, a
       faint specular highlight, a faint magenta whisper, over near-black */
    background:
        radial-gradient(120% 120% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(30% 22% at 50% 6%, rgba(140, 90, 210, 0.22) 0%, rgba(140, 90, 210, 0) 72%),
        radial-gradient(55% 50% at 50% 32%, rgba(255, 42, 133, 0.1) 0%, rgba(255, 42, 133, 0) 72%),
        radial-gradient(130% 100% at 50% 0%,
            var(--hl-indigo-lift) 0%, var(--hl-indigo) 46%, var(--hl-indigo-deep) 100%);
    overflow: hidden;
    border-bottom: 1px solid rgba(197, 164, 90, 0.18);
}

/* Glossy reflection streak — a single sharp diagonal highlight (glass/lacquer
   sheen), replacing the earlier soft multi-band silk texture */
.hl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0.1) 47%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.1) 53%,
        rgba(255, 255, 255, 0) 68%);
    mix-blend-mode: overlay;
    z-index: -2;
    pointer-events: none;
}

/* Motif: soft paper grain */
.hl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: -1;
    pointer-events: none;
}

/* --- Wow-factor: ambient drifting light + twinkling sparkles --- */

.hl-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -3;
    pointer-events: none;
}

.hl-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}

.hl-aurora-blob-a {
    width: 46vw;
    height: 46vw;
    max-width: 520px;
    max-height: 520px;
    left: -10%;
    top: -12%;
    background: radial-gradient(circle, rgba(255, 42, 133, 0.32) 0%, transparent 70%);
    animation: hl-aurora-drift-a 22s ease-in-out infinite alternate;
}

.hl-aurora-blob-b {
    width: 38vw;
    height: 38vw;
    max-width: 440px;
    max-height: 440px;
    right: -8%;
    bottom: -14%;
    background: radial-gradient(circle, rgba(150, 96, 220, 0.28) 0%, transparent 70%);
    animation: hl-aurora-drift-b 26s ease-in-out infinite alternate;
}

@keyframes hl-aurora-drift-a {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(7%, 9%) scale(1.18); }
}

@keyframes hl-aurora-drift-b {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-9%, -7%) scale(1.12); }
}

.hl-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hl-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hl-brass-light);
    box-shadow: 0 0 6px 1px rgba(230, 205, 139, 0.85), 0 0 16px 4px rgba(255, 58, 150, 0.35);
    opacity: 0;
    animation: hl-twinkle 4s ease-in-out infinite;
}

.hl-spark:nth-child(1) { top: 12%; left: 8%; animation-delay: 0s; }
.hl-spark:nth-child(2) { top: 22%; left: 90%; animation-delay: 1.1s; }
.hl-spark:nth-child(3) { top: 68%; left: 13%; animation-delay: 2.3s; }
.hl-spark:nth-child(4) { top: 80%; left: 85%; animation-delay: 0.6s; }
.hl-spark:nth-child(5) { top: 46%; left: 94%; animation-delay: 1.8s; }
.hl-spark:nth-child(6) { top: 6%; left: 58%; animation-delay: 2.7s; }

@keyframes hl-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Content wrap — centered composition */
.hl-hero-wrap {
    position: relative;
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

/* Brandmark — the peacock and the stacked name now sit together inside one
   shared mitti-brown frame, instead of the peacock and title each carrying
   their own separate backdrop. The title's glow/hover keeps working exactly
   as before — filter/hover live on .hl-neon-line itself, unaffected by
   whatever sits behind it. */
.hl-brandmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.2rem, 4vw, 2.5rem);
    flex-wrap: wrap;
    position: relative;
    padding: clamp(1.8rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(160deg, #3d2c1c 0%, #2a1f16 55%, #1b130c 100%);
    border: 1px solid rgba(230, 205, 139, 0.22);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Ambient outer halo — soft, blurred, blends the whole frame into the ground */
.hl-brandmark::before {
    content: "";
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(closest-side, rgba(230, 205, 139, 0.16) 0%, rgba(255, 58, 150, 0.12) 55%, transparent 78%);
    filter: blur(50px);
    z-index: -1;
}

/* Peacock emblem — presented as a framed piece, not fought with filters.
   Earlier luminance-keying attempts to cut the photo's dark ground never
   read cleanly; a crisp photo in a rich gold frame is simple and reliable. */
.hl-neon-wrap {
    position: relative;
    width: 100%;
    max-width: clamp(160px, 24vw, 230px);
    flex-shrink: 0;
}

/* The gold frame itself — a metallic gradient border (the design system's
   "double hairline gold frame" motif) with a deep drop shadow that breathes */
/* Same mitti-brown family as the outer .hl-brandmark frame — a shade
   lighter for depth, but no gold, so the whole frame reads as one
   uniform earthen brown instead of a gold border on a brown card */
.hl-peacock-frame {
    position: relative;
    padding: 8px;
    background: linear-gradient(160deg, #8a5a35 0%, #6b4326 50%, #4a3018 100%);
    border-radius: 18px;
    opacity: 0;
    transform: scale(0.92);
    animation: hl-body-in 0.9s ease 0.1s forwards, hl-frame-breathe 3.4s ease-in-out 1.4s infinite;
}

.hl-peacock-frame::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(20, 14, 10, 0.4);
    border-radius: 15px;
    pointer-events: none;
}

.hl-peacock-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* A non-destructive boost — richer gold and contrast, nothing cut out */
    filter: contrast(1.1) saturate(1.25) brightness(1.06);
}

@keyframes hl-body-in {
    to { opacity: 1; transform: scale(1); }
}

@keyframes hl-frame-breathe {
    0%, 100% {
        box-shadow: 0 26px 55px rgba(0, 0, 0, 0.55), 0 0 0 rgba(230, 205, 139, 0);
    }
    50% {
        box-shadow: 0 26px 55px rgba(0, 0, 0, 0.55), 0 0 34px 6px rgba(230, 205, 139, 0.4);
    }
}

/* Parameterized via custom properties so :hover can retint a running
   animation — a plain filter override would be silently ignored, since a
   running keyframe wins any priority fight over a non-animated declaration
   on the same property; changing the vars it reads from does work */
@keyframes hl-neon-breathe-title {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--hl-glow-a)) drop-shadow(0 0 26px var(--hl-glow-b));
    }
    50% {
        filter: drop-shadow(0 0 14px var(--hl-glow-a-strong)) drop-shadow(0 0 38px var(--hl-glow-b-strong));
    }
}

/* Brand name — stacked one word per line, right of the peacock. It now
   sits inside the shared .hl-brandmark frame, so it no longer needs its
   own separate backdrop behind it. */
.hl-neon-title {
    position: relative;
    margin: 0;
    text-align: left;
}

/* Each word powers on in sequence, like a neon sign spelling itself out,
   then all four settle into a synchronized glow-breathe */
.hl-neon-line {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 7vw, 4.4rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.08;
    color: var(--hl-brass-light);
    --hl-glow-a: rgba(230, 205, 139, 0.75);
    --hl-glow-b: rgba(255, 58, 150, 0.35);
    --hl-glow-a-strong: rgba(230, 205, 139, 1);
    --hl-glow-b-strong: rgba(255, 58, 150, 0.55);
    filter: drop-shadow(0 0 8px var(--hl-glow-a)) drop-shadow(0 0 26px var(--hl-glow-b));
    opacity: 0;
    transform: translateY(14px);
    /* transform stays driven by the entrance animation below, so the hover
       lift uses letter-spacing instead — a property that animation doesn't
       touch — to avoid the two fighting each other */
    transition: color 0.3s ease, letter-spacing 0.3s ease;
    animation: fadeInUp 0.5s ease forwards, hl-neon-breathe-title 3.2s ease-in-out infinite;
}

.hl-neon-line:nth-child(1) { animation-delay: 0.9s, 2.3s; }
.hl-neon-line:nth-child(2) { animation-delay: 1.05s, 2.3s; }
.hl-neon-line:nth-child(3) { animation-delay: 1.2s, 2.3s; }
.hl-neon-line:nth-child(4) { animation-delay: 1.35s, 2.3s; }

/* Hover: the site's dark pink, for both the fill AND the glow, matching
   the hover accent used everywhere else in the hero */
.hl-neon-line:hover {
    color: var(--hl-rose);
    letter-spacing: 0.09em;
    --hl-glow-a: rgba(255, 42, 133, 0.85);
    --hl-glow-b: rgba(255, 42, 133, 0.45);
    --hl-glow-a-strong: rgba(255, 42, 133, 1);
    --hl-glow-b-strong: rgba(255, 42, 133, 0.65);
}

/* Italic tagline — kept to a single line on desktop, with a hover accent */
/* Wraps by default (safe at any width); goes single-line only once the
   viewport is wide enough to genuinely fit it — so it can keep growing
   without ever risking clipping against the hero's overflow:hidden.
   Switched from Cormorant (display serif) to Mukta (clean humanist
   sans) — a suaver, far more legible choice for a line this long. */
.hl-tagline {
    font-family: 'Mukta', system-ui, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: var(--hl-blush);
    white-space: normal;
    max-width: 46ch;
    margin: 0 auto;
    transition: color 0.3s ease;
    cursor: default;
}

.hl-tagline:hover {
    color: var(--hl-rose);
}

@media (min-width: 1300px) {
    .hl-tagline {
        white-space: nowrap;
        max-width: none;
    }
}

/* Poetic manifest — centered, with a short brass rule standing in for the
   old left hairline now that the composition is centered */
.hl-poem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.3rem;
    margin-top: 0.6rem;
}

.hl-poem::before {
    content: "";
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197, 164, 90, 0.65), transparent);
    margin-bottom: 0.3rem;
}

.hl-poem-line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    color: var(--hl-ivory);
    line-height: 1.15;
    transition: transform 0.3s ease, color 0.3s ease;
}

.hl-poem-line:hover {
    color: var(--hl-rose);
    transform: translateY(-3px);
}

.hl-poem-heart {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    color: rgba(241, 233, 214, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "for the ♥ of Mother Nature…" in gold, bold — not italic/ivory like the rest */
.hl-poem-heart-gold {
    font-style: normal;
    font-weight: 700;
    color: var(--hl-brass-light);
}

.hl-poem-sign {
    font-family: 'Mukta', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hl-rose);
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

/* The heart — the site's dark pink, gently beating */
.hl-heart {
    color: var(--hl-rose);
    font-style: normal;
    display: inline-block;
    margin: 0 0.15em;
    animation: hl-heartbeat 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 42, 133, 0.55));
}

@keyframes hl-heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

/* Staggered entrance — follows the neon reveal (icon draws in, title glows on) */
.hl-tagline,
.hl-poem {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.hl-tagline { animation-delay: 1.9s; }
.hl-poem { animation-delay: 2.1s; }

@media (max-width: 768px) {
    .hl-hero {
        min-height: 80vh;
        padding: 7rem 0 5rem;
    }
    .hl-brandmark {
        flex-direction: column;
        padding: 1.6rem 1.4rem;
    }
    .hl-neon-wrap {
        max-width: 180px;
    }
    .hl-neon-title,
    .hl-neon-line {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl-peacock-frame,
    .hl-neon-line,
    .hl-tagline,
    .hl-poem,
    .moon-body {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .hl-heart { animation: none; }
    .hl-poem-line:hover { transform: none; }
    .hl-aurora-blob { animation: none; }
    .hl-spark { animation: none; opacity: 0.5; }
}

/* --- Moon-phase widget (Today's Moodboard) --- */

.moon-widget-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.moon-body {
    width: clamp(120px, 22vw, 180px);
    height: clamp(120px, 22vw, 180px);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at 35% 30%, #fff8e7 0%, #f3e2b8 55%, #d9c48f 100%);
    opacity: 0;
    transform: scale(0.9);
    animation: hl-body-in 0.9s ease 0.1s forwards, moon-breathe 5s ease-in-out 1.4s infinite;
}

.moon-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #020103;
    transition: transform 1.2s ease;
}

@keyframes moon-breathe {
    0%, 100% {
        box-shadow: 0 0 40px 10px rgba(243, 226, 184, 0.35), 0 0 90px 25px rgba(150, 96, 220, 0.18);
    }
    50% {
        box-shadow: 0 0 55px 14px rgba(243, 226, 184, 0.5), 0 0 110px 30px rgba(150, 96, 220, 0.28);
    }
}