/* AI Apollo — Diya Page Styles */
/* Extracted from inline <style> */

        /* ============================================================
           DIYA PAGE — PAGE-SPECIFIC OVERRIDES & DARK THEME
           All nav/footer/container/utility classes from styles.css
        ============================================================ */
        /* ── DESIGN TOKENS (dark temple palette) ─────────────────── */
        :root {
            --diya-bg:          #0A1117;
            --diya-bg-darker:   #070D12;
            --diya-bg-deep:     #060B10;
            --diya-bg-deepest:  #050810;
            --gold-1:           #D4A84B;
            --gold-2:           #E8C171;
            --gold-3:           #F5D88A;
            --gold-dim:         #A07830;
            --gold-glow:        rgba(212, 168, 75, 0.30);
            --gold-glow-sm:     rgba(212, 168, 75, 0.15);
            --gold-glow-xs:     rgba(212, 168, 75, 0.08);
            --gold-border:      rgba(212, 168, 75, 0.25);
            --gold-border-sm:   rgba(212, 168, 75, 0.15);
            --teal-1:           #00B4D8;
            --teal-2:           #48CAE4;
            --flame-outer:      #FF6B00;
            --flame-mid:        #FFB800;
            --flame-inner:      #FFFBE6;
            --diya-text:        #FFFFFF;
            --diya-text-sec:    rgba(255, 255, 255, 0.70);
            --diya-text-muted:  rgba(255, 255, 255, 0.40);
            --diya-text-faint:  rgba(255, 255, 255, 0.20);
            --glass-bg:         rgba(255, 255, 255, 0.03);
            --glass-bg-hover:   rgba(255, 255, 255, 0.05);
            --glass-border:     rgba(212, 168, 75, 0.15);
            --tooltip-bg:       rgba(15, 12, 8, 0.96);
            --t-fast:           0.2s ease;
            --t-med:            0.35s ease;
            --t-slow:           0.6s ease;
        }
        /* ── GLOBAL RESET FOR THIS PAGE ─────────────────────────── */
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--diya-bg);
            color: var(--diya-text);
            font-family: 'Manrope', system-ui, sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        ::selection {
            background: var(--gold-1);
            color: var(--diya-bg);
        }
        ::-webkit-scrollbar          { width: 5px; }
        ::-webkit-scrollbar-track    { background: var(--diya-bg); }
        ::-webkit-scrollbar-thumb    { background: var(--gold-dim); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--gold-1); }
        /* ── NAV DARK OVERRIDE (nav base from styles.css) ────────── */
        /* Override light nav bg for this dark page */
        .nav {
            background: rgba(10, 17, 23, 0.72) !important;
            border-bottom-color: var(--glass-border) !important;
        }
        .nav.scrolled {
            background: rgba(7, 13, 18, 0.94) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
        }
        .nav-logo {
            color: var(--gold-2) !important;
            font-family: 'Playfair Display', serif !important;
            font-size: 1.15rem !important;
            font-weight: 700 !important;
        }
        .nav-logo .glow-text {
            filter: drop-shadow(0 0 10px rgba(0,180,216,0.35)) !important;
        }
        .nav-links a {
            color: var(--diya-text-sec) !important;
        }
        .nav-links a:hover,
        .nav-links a.active {
            color: var(--gold-2) !important;
        }
        .nav-links a::after {
            background: linear-gradient(90deg, var(--gold-1), var(--gold-2)) !important;
        }
        .nav-links a.active::after {
            width: 100% !important;
        }
        .nav-cta {
            background: linear-gradient(135deg, var(--gold-1), var(--gold-2)) !important;
            color: var(--diya-bg) !important;
            box-shadow: 0 3px 14px var(--gold-glow-sm) !important;
        }
        .nav-cta:hover {
            box-shadow: 0 8px 28px var(--gold-glow) !important;
        }
        .nav-toggle span {
            background: var(--diya-text-sec) !important;
        }
        .nav-mobile {
            background: rgba(10, 17, 23, 0.99) !important;
            border-left-color: var(--glass-border) !important;
        }
        .nav-mobile a {
            color: var(--diya-text-sec) !important;
            border-bottom-color: var(--glass-border) !important;
        }
        .nav-mobile a:hover,
        .nav-mobile a.active {
            color: var(--gold-2) !important;
        }
        /* ── FOOTER DARK OVERRIDE ────────────────────────────────── */
        .footer {
            background: var(--diya-bg-deepest) !important;
            border-top: 1px solid var(--glass-border) !important;
        }
        .footer-logo {
            color: var(--gold-2) !important;
        }
        .footer-logo span {
            color: var(--gold-3) !important;
        }
        .footer p, .footer-disclaimer {
            color: var(--diya-text-muted) !important;
        }
        .footer-links a {
            color: var(--diya-text-muted) !important;
        }
        .footer-links a:hover {
            color: var(--gold-2) !important;
        }
        /* ============================================================
           PAGE FLASH OVERLAY
        ============================================================ */
        #page-flash {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            background: radial-gradient(ellipse at center,
                rgba(212, 168, 75, 0.22) 0%,
                rgba(255, 180, 50, 0.10) 35%,
                transparent 70%
            );
            opacity: 0;
        }
        #page-flash.flash-active {
            animation: pageFlash 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        @keyframes pageFlash {
            0%   { opacity: 0; }
            15%  { opacity: 1; }
            60%  { opacity: 0.5; }
            100% { opacity: 0; }
        }
        /* ============================================================
           TOAST NOTIFICATIONS
        ============================================================ */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(80px);
            background: rgba(15, 12, 8, 0.96);
            border: 1px solid var(--gold-border);
            border-radius: 12px;
            padding: 0.85rem 1.5rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--diya-text);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            z-index: 10000;
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            max-width: 90vw;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        }
        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .toast-success {
            border-color: rgba(212, 168, 75, 0.45);
            background: rgba(10, 8, 3, 0.97);
        }
        .toast-error {
            border-color: rgba(255, 80, 80, 0.5);
            background: rgba(20, 5, 5, 0.97);
            color: #FF8080;
        }
        /* ============================================================
           FLOATING PARTICLES
        ============================================================ */
        .particles-container {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .particle {
            position: absolute;
            bottom: -8px;
            border-radius: 50%;
            background: var(--gold-2);
            opacity: 0;
            animation: floatUp var(--dur, 25s) var(--delay, 0s) ease-in infinite;
        }
        .particle.large {
            box-shadow: 0 0 6px rgba(212, 168, 75, 0.5);
        }
        @keyframes floatUp {
            0%   { transform: translateY(0)      translateX(0)                           scale(1);    opacity: 0; }
            4%   { opacity: var(--max-op, 0.45); }
            35%  { transform: translateY(-35vh)  translateX(calc(var(--drift) * 0.5))   scale(0.95); opacity: var(--max-op, 0.4); }
            70%  { transform: translateY(-70vh)  translateX(var(--drift))               scale(0.80); opacity: calc(var(--max-op, 0.4) * 0.6); }
            100% { transform: translateY(-108vh) translateX(calc(var(--drift) * 1.3))   scale(0.5);  opacity: 0; }
        }
        /* ============================================================
           SCROLL REVEAL
        ============================================================ */
        .section-reveal {
            opacity: 0;
            transform: translateY(32px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .section-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* ============================================================
           HERO — FULL VIEWPORT
        ============================================================ */
        .diya-hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8rem 2rem 5rem;
            background: var(--diya-bg);
            overflow: hidden;
        }
        .diya-hero-bg-glow {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .diya-hero-bg-glow::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 70% 60% at 50% 55%,
                rgba(212, 168, 75, 0.055) 0%,
                rgba(212, 168, 75, 0.02)  40%,
                transparent 70%
            );
        }
        .diya-hero-bg-glow::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 200px;
            background: linear-gradient(to top, rgba(7, 13, 18, 0.6), transparent);
        }
        /* ---- LARGE HERO DIYA ---- */
        .main-diya-wrapper {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2.8rem;
            z-index: 2;
        }
        .main-diya-glow-ring {
            position: absolute;
            top: -40px; left: 50%;
            transform: translateX(-50%);
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: radial-gradient(ellipse,
                rgba(212, 168, 75, 0.20) 0%,
                rgba(212, 168, 75, 0.06) 40%,
                transparent 70%
            );
            animation: mainGlowPulse 3.2s ease-in-out infinite alternate;
            pointer-events: none;
        }
        .main-diya-glow-ring-2 {
            position: absolute;
            top: -70px; left: 50%;
            transform: translateX(-50%);
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(ellipse,
                rgba(212, 168, 75, 0.06) 0%,
                transparent 65%
            );
            animation: mainGlowPulse2 5s ease-in-out infinite alternate;
            pointer-events: none;
        }
        @keyframes mainGlowPulse {
            0%   { opacity: 0.55; transform: translateX(-50%) scale(0.93); }
            100% { opacity: 1.00; transform: translateX(-50%) scale(1.18); }
        }
        @keyframes mainGlowPulse2 {
            0%   { opacity: 0.3; transform: translateX(-50%) scale(0.90); }
            100% { opacity: 0.8; transform: translateX(-50%) scale(1.12); }
        }
        .main-flame-assembly {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2px;
        }
        .main-flame-wrap {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .main-flame-outer {
            width: 30px;
            height: 56px;
            border-radius: 50% 50% 33% 33% / 58% 58% 42% 42%;
            background: linear-gradient(to top,
                var(--flame-outer)  0%,
                #FF9200            30%,
                var(--flame-mid)   58%,
                #FFE066            80%,
                var(--flame-inner) 100%
            );
            position: relative;
            animation: flickerOuter 1.55s ease-in-out infinite;
            filter: blur(0.8px);
            box-shadow: 0 0 18px rgba(255, 150, 0, 0.5), 0 0 36px rgba(255, 100, 0, 0.25);
            transform-origin: bottom center;
        }
        .main-flame-mid {
            position: absolute;
            top: 9px;
            left: 50%;
            transform: translateX(-50%);
            width: 19px;
            height: 38px;
            border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
            background: linear-gradient(to top, var(--flame-mid) 0%, #FFE566 60%, var(--flame-inner) 100%);
            animation: flickerMid 2.05s ease-in-out infinite;
            filter: blur(0.4px);
            transform-origin: bottom center;
        }
        .main-flame-core {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 11px;
            height: 24px;
            border-radius: 50% 50% 40% 40% / 62% 62% 38% 38%;
            background: linear-gradient(to top, #FFE566 0%, #FFFDE0 60%, #FFFFFF 100%);
            animation: flickerCore 2.5s ease-in-out infinite;
            transform-origin: bottom center;
        }
        @keyframes flickerOuter {
            0%   { transform: scaleX(1.00) scaleY(1.00) skewX(0.0deg);  opacity: 0.96; }
            10%  { transform: scaleX(0.94) scaleY(1.06) skewX(-2.5deg); opacity: 1.00; }
            22%  { transform: scaleX(1.06) scaleY(0.96) skewX(1.5deg);  opacity: 0.91; }
            35%  { transform: scaleX(0.97) scaleY(1.04) skewX(-1.0deg); opacity: 0.98; }
            50%  { transform: scaleX(1.03) scaleY(0.98) skewX(2.0deg);  opacity: 0.93; }
            65%  { transform: scaleX(0.96) scaleY(1.03) skewX(-1.5deg); opacity: 0.97; }
            80%  { transform: scaleX(1.04) scaleY(0.97) skewX(1.0deg);  opacity: 0.92; }
            100% { transform: scaleX(1.00) scaleY(1.00) skewX(0.0deg);  opacity: 0.96; }
        }
        @keyframes flickerMid {
            0%,100% { transform: translateX(-50%) scaleX(1.00) scaleY(1.00); opacity: 0.92; }
            18%     { transform: translateX(-50%) scaleX(0.88) scaleY(1.09); opacity: 1.00; }
            36%     { transform: translateX(-50%) scaleX(1.11) scaleY(0.94); opacity: 0.85; }
            54%     { transform: translateX(-50%) scaleX(0.95) scaleY(1.06); opacity: 0.96; }
            72%     { transform: translateX(-50%) scaleX(1.07) scaleY(0.96); opacity: 0.88; }
        }
        @keyframes flickerCore {
            0%,100% { transform: translateX(-50%) scaleX(1.0) scaleY(1.00); opacity: 1.00; }
            28%     { transform: translateX(-50%) scaleX(0.8) scaleY(1.12); opacity: 0.82; }
            56%     { transform: translateX(-50%) scaleX(1.2) scaleY(0.90); opacity: 0.96; }
            78%     { transform: translateX(-50%) scaleX(0.9) scaleY(1.06); opacity: 0.88; }
        }
        /* Intensified state when new diya is lit */
        .main-diya-wrapper.intensified .main-flame-outer {
            animation: flickerOuter 0.75s ease-in-out infinite;
            transform: scale(1.45);
            filter: blur(2px) drop-shadow(0 0 24px #FFB800) drop-shadow(0 0 48px rgba(255, 100, 0, 0.4));
        }
        .main-diya-wrapper.intensified .main-flame-mid {
            filter: blur(1px) drop-shadow(0 0 14px #FFFBE6);
        }
        .main-diya-wrapper.intensified .main-flame-core {
            filter: drop-shadow(0 0 8px #FFFFFF);
        }
        .main-diya-wrapper.intensified .main-diya-glow-ring {
            width: 280px; height: 280px;
            background: radial-gradient(ellipse, rgba(212, 168, 75, 0.50) 0%, transparent 70%);
            animation: mainGlowPulse 0.8s ease-in-out infinite alternate;
        }
        .main-diya-wrapper.intensified .main-diya-glow-ring-2 {
            width: 400px; height: 400px;
            background: radial-gradient(ellipse, rgba(212, 168, 75, 0.18) 0%, transparent 65%);
        }
        .main-wick {
            width: 3px;
            height: 14px;
            background: linear-gradient(to top, #4A3000, #9A6020);
            border-radius: 1.5px;
        }
        .main-diya-bowl {
            position: relative;
            width: 90px;
            height: 30px;
            background: linear-gradient(180deg, #DCA53C 0%, #B07E28 35%, #7A5010 100%);
            border-radius: 0 0 52px 52px / 0 0 32px 32px;
            box-shadow:
                0  4px 20px rgba(212, 168, 75, 0.45),
                0  0  40px rgba(212, 168, 75, 0.18),
                inset 0 -5px 10px rgba(0, 0, 0, 0.45);
            overflow: hidden;
        }
        .main-diya-bowl::before {
            content: '';
            position: absolute;
            top: 1px; left: 8%; right: 8%;
            height: 10px;
            background: radial-gradient(ellipse at 50% 0%,
                rgba(255, 230, 100, 0.55) 0%,
                rgba(255, 200, 60, 0.25)  50%,
                transparent 100%
            );
            border-radius: 50%;
        }
        .main-diya-bowl::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 220, 100, 0.6) 25%,
                rgba(255, 240, 150, 0.8) 50%,
                rgba(255, 220, 100, 0.5) 75%,
                transparent 100%
            );
        }
        .main-diya-base {
            width: 104px;
            height: 7px;
            background: linear-gradient(90deg,
                #5A3800  0%,
                #C08030 20%,
                #E8B84B 50%,
                #C08030 80%,
                #5A3800 100%
            );
            border-radius: 0 0 52px 52px;
            margin-top: -1px;
            box-shadow: 0 5px 18px rgba(212, 168, 75, 0.30);
        }
        /* ---- HERO TYPOGRAPHY ---- */
        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }
        .hero-eyebrow {
            font-family: 'Manrope', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.20em;
            text-transform: uppercase;
            color: var(--gold-dim);
            margin-bottom: 0.8rem;
        }
        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.6rem, 7vw, 4.2rem);
            font-weight: 800;
            line-height: 1.05;
            background: linear-gradient(145deg, var(--gold-1) 0%, var(--gold-3) 45%, var(--gold-2) 70%, var(--gold-1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.9rem;
            letter-spacing: -0.01em;
        }
        .hero-subtitle {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--diya-text-sec);
            letter-spacing: 0.03em;
            margin-bottom: 2.2rem;
            max-width: 420px;
        }
        .hero-counter-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: rgba(212, 168, 75, 0.07);
            border: 1px solid rgba(212, 168, 75, 0.18);
            border-radius: 40px;
            padding: 0.5rem 1.2rem;
            margin-bottom: 1rem;
        }
        .hero-counter-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold-2);
            animation: counterDotBlink 1.8s ease-in-out infinite;
        }
        @keyframes counterDotBlink {
            0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--gold-2); }
            50%       { opacity: 0.35; box-shadow: none; }
        }
        .hero-counter-text {
            font-family: 'Manrope', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--gold-3);
            letter-spacing: 0.04em;
        }
        .hero-counter-text .count-number {
            font-size: 1.05rem;
            font-weight: 700;
        }
        /* Scroll indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 2.8rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            color: var(--diya-text-muted);
            cursor: pointer;
            animation: scrollBounce 2.2s ease-in-out infinite;
            z-index: 2;
            transition: color var(--t-fast);
            background: none;
            border: none;
        }
        .scroll-indicator:hover { color: var(--gold-2); }
        .scroll-indicator-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }
        .scroll-indicator-chevron {
            font-size: 1.2rem;
            line-height: 1;
        }
        @keyframes scrollBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50%       { transform: translateX(-50%) translateY(7px); }
        }
        /* ============================================================
           GOLD DIVIDER
        ============================================================ */
        .gold-divider {
            display: flex;
            align-items: center;
            gap: 1rem;
            max-width: 300px;
            margin: 2.5rem auto;
        }
        .gold-divider-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
        }
        .gold-divider-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--gold-1);
            opacity: 0.6;
        }
        /* ============================================================
           SHARED SECTION TYPOGRAPHY (dark page overrides)
        ============================================================ */
        .diya-section-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.20em;
            text-transform: uppercase;
            color: var(--gold-dim);
            margin-bottom: 0.7rem;
            display: block;
        }
        .diya-section-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.9rem, 4.5vw, 3rem);
            font-weight: 700;
            color: var(--diya-text);
            line-height: 1.18;
            margin-bottom: 0.65rem;
        }
        .diya-section-title .gold-grad {
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .diya-section-sub {
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 400;
            color: var(--diya-text-sec);
            line-height: 1.75;
            max-width: 560px;
            margin: 0 auto;
        }
        /* ============================================================
           FORM SECTION — LIGHT YOUR DIYA
        ============================================================ */
        .form-section {
            padding: 7rem 2rem;
            position: relative;
            background: var(--diya-bg);
            text-align: center;
        }
        .form-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 70% 50% at 15% 50%, rgba(212, 168, 75, 0.028) 0%, transparent 65%),
                radial-gradient(ellipse 50% 40% at 85% 50%, rgba(212, 168, 75, 0.022) 0%, transparent 60%);
            pointer-events: none;
        }
        .form-card {
            max-width: 610px;
            margin: 3.2rem auto 0;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 3.2rem 3rem;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow:
                0 0 60px rgba(212, 168, 75, 0.05),
                0 20px 60px rgba(0, 0, 0, 0.35);
        }
        .form-field {
            margin-bottom: 1.6rem;
            text-align: left;
        }
        .form-field label {
            display: block;
            font-family: 'Manrope', sans-serif;
            font-size: 0.73rem;
            font-weight: 700;
            color: var(--gold-2);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 0.55rem;
        }
        .form-field input,
        .form-field textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.038);
            border: 1px solid rgba(212, 168, 75, 0.18);
            border-radius: 12px;
            padding: 0.92rem 1.15rem;
            color: var(--diya-text);
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            outline: none;
            transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
            resize: none;
            line-height: 1.55;
        }
        .form-field textarea {
            font-family: 'Caveat', cursive;
            font-size: 1.2rem;
            min-height: 100px;
        }
        .form-field input::placeholder  { color: var(--diya-text-muted); font-family: 'Manrope', sans-serif; }
        .form-field textarea::placeholder { color: var(--diya-text-muted); font-family: 'Caveat', cursive; font-size: 1.1rem; }
        .form-field input:focus,
        .form-field textarea:focus {
            border-color: var(--gold-1);
            background: rgba(255, 255, 255, 0.055);
            box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.10), 0 0 22px rgba(212, 168, 75, 0.06);
        }
        /* Light Diya CTA Button */
        .btn-light-diya {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            width: 100%;
            padding: 1.05rem 2rem;
            background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 60%, var(--gold-3) 100%);
            border: none;
            border-radius: 14px;
            font-family: 'Manrope', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--diya-bg);
            cursor: pointer;
            letter-spacing: 0.05em;
            transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
            margin-top: 0.75rem;
            box-shadow: 0 4px 20px rgba(212, 168, 75, 0.25);
        }
        .btn-light-diya:hover:not(:disabled) {
            transform: scale(1.025) translateY(-2px);
            box-shadow: 0 10px 36px rgba(212, 168, 75, 0.50);
            filter: brightness(1.08);
        }
        .btn-light-diya:active:not(:disabled) {
            transform: scale(0.985);
            box-shadow: 0 4px 14px rgba(212, 168, 75, 0.25);
        }
        .btn-light-diya:disabled {
            opacity: 0.75;
            cursor: not-allowed;
        }
        /* Share card */
        .share-card {
            max-width: 610px;
            margin: 1.8rem auto 0;
            background: rgba(212, 168, 75, 0.04);
            border: 1px solid rgba(212, 168, 75, 0.28);
            border-radius: 18px;
            padding: 1.8rem 2.2rem;
            text-align: center;
            display: none;
        }
        .share-card.visible {
            display: block;
            animation: fadeSlideUp 0.55s ease forwards;
        }
        @keyframes fadeSlideUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .share-card-icon {
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
        }
        .share-card h4 {
            font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gold-3);
            margin-bottom: 0.4rem;
        }
        .share-card p {
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            color: var(--diya-text-sec);
            margin-bottom: 1.2rem;
            line-height: 1.6;
        }
        .share-buttons {
            display: flex;
            gap: 0.8rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn-share {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.6rem 1.2rem;
            border-radius: 9px;
            font-family: 'Manrope', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.04em;
            transition: background, color, box-shadow, transform, opacity var(--t-fast);
            border: none;
        }
        .btn-copy {
            background: rgba(255, 255, 255, 0.08);
            color: var(--diya-text);
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
        }
        .btn-copy:hover  { background: rgba(255, 255, 255, 0.14); }
        .btn-whatsapp    { background: #25D366; color: #fff; text-decoration: none; }
        .btn-whatsapp:hover { background: #1EBF5A; transform: translateY(-1px); color: #fff; }
        /* ============================================================
           DIYA MEMORIES — CALENDAR FILTER
        ============================================================ */
        .calendar-filter-bar {
            text-align: center;
            padding: 1.5rem 2rem 0;
            background: var(--diya-bg);
            position: relative;
        }
        .calendar-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.65rem 1.4rem;
            background: rgba(212, 168, 75, 0.08);
            border: 1px solid var(--gold-border);
            border-radius: 12px;
            color: var(--gold-2);
            font-family: 'Manrope', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            cursor: pointer;
            transition: background, color, box-shadow, transform, opacity var(--t-med);
        }
        .calendar-toggle-btn:hover {
            background: rgba(212, 168, 75, 0.14);
            border-color: var(--gold-1);
            box-shadow: 0 0 20px rgba(212, 168, 75, 0.12);
        }
        .calendar-toggle-btn.active {
            background: rgba(212, 168, 75, 0.15);
            border-color: var(--gold-1);
            box-shadow: 0 0 24px rgba(212, 168, 75, 0.15);
        }
        .calendar-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        /* Calendar Panel */
        .calendar-panel {
            max-width: 380px;
            margin: 1.2rem auto 0;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 18px;
            padding: 1.5rem;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 0 40px rgba(212, 168, 75, 0.06), 0 12px 40px rgba(0,0,0,0.3);
            display: none;
            animation: calSlideDown 0.35s ease forwards;
        }
        .calendar-panel.open {
            display: block;
        }
        @keyframes calSlideDown {
            from { opacity: 0; transform: translateY(-12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .calendar-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        .cal-nav-btn {
            background: none;
            border: 1px solid var(--gold-border-sm);
            border-radius: 8px;
            color: var(--gold-2);
            font-size: 1.3rem;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background, color, box-shadow, transform, opacity var(--t-fast);
        }
        .cal-nav-btn:hover {
            background: rgba(212, 168, 75, 0.12);
            border-color: var(--gold-1);
        }
        .cal-month-label {
            font-family: 'Playfair Display', serif;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--gold-3);
            letter-spacing: 0.03em;
        }
        .cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            margin-bottom: 0.5rem;
        }
        .cal-weekdays span {
            font-family: 'Manrope', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--diya-text-muted);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 0.3rem 0;
        }
        .cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
        }
        .cal-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--diya-text-muted);
            border-radius: 10px;
            position: relative;
            transition: background, color, box-shadow, transform, opacity var(--t-fast);
        }
        .cal-day.empty {
            pointer-events: none;
        }
        .cal-day.has-diyas {
            color: var(--gold-2);
            cursor: pointer;
            font-weight: 700;
        }
        .cal-day.has-diyas::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--gold-1);
            box-shadow: 0 0 6px var(--gold-glow);
            transition: background, color, box-shadow, transform, opacity var(--t-fast);
        }
        .cal-day.has-diyas.glow-bright::after {
            width: 7px;
            height: 7px;
            box-shadow: 0 0 10px var(--gold-1), 0 0 18px var(--gold-glow);
        }
        .cal-day.has-diyas:hover {
            background: rgba(212, 168, 75, 0.10);
        }
        .cal-day.selected {
            background: rgba(212, 168, 75, 0.18);
            color: var(--gold-3);
            box-shadow: 0 0 0 2px var(--gold-1);
        }
        .cal-day.future {
            color: var(--diya-text-faint);
            pointer-events: none;
        }
        /* Filter Info Bar */
        .calendar-filter-info {
            text-align: center;
            padding: 2rem 2rem 0.5rem;
            background: var(--diya-bg);
            animation: fadeSlideUp 0.4s ease forwards;
        }
        .filter-quote {
            font-family: 'Caveat', cursive;
            font-size: 1.35rem;
            color: var(--gold-3);
            font-style: italic;
            line-height: 1.5;
            max-width: 600px;
            margin: 0 auto 0.3rem;
            position: relative;
            padding: 0 1.5rem;
        }
        .filter-quote::before,
        .filter-quote::after {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            color: var(--gold-dim);
            position: absolute;
            opacity: 0.5;
        }
        .filter-quote::before {
            content: '\201C';
            left: 0;
            top: -0.3rem;
        }
        .filter-quote::after {
            content: '\201D';
            right: 0;
            bottom: -0.6rem;
        }
        .filter-quote-author {
            font-family: 'Manrope', sans-serif;
            font-size: 0.75rem;
            color: var(--diya-text-muted);
            letter-spacing: 0.06em;
            margin-bottom: 1.2rem;
        }
        .filter-date-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .filter-date-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--diya-text-sec);
        }
        .filter-reset-btn {
            padding: 0.4rem 1rem;
            background: rgba(212, 168, 75, 0.10);
            border: 1px solid var(--gold-border);
            border-radius: 8px;
            color: var(--gold-2);
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: background, color, box-shadow, transform, opacity var(--t-fast);
        }
        .filter-reset-btn:hover {
            background: rgba(212, 168, 75, 0.18);
            border-color: var(--gold-1);
        }
        /* ============================================================
           PRAYER WALL — DIYA GRID
        ============================================================ */
        .wall-section {
            padding: 7rem 2.5rem;
            background: var(--diya-bg-deep);
            position: relative;
        }
        .wall-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 100px;
            background: linear-gradient(to bottom, var(--diya-bg), transparent);
            pointer-events: none;
        }
        .wall-section::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 100px;
            background: linear-gradient(to top, var(--diya-bg), transparent);
            pointer-events: none;
        }
        .wall-header {
            text-align: center;
            margin-bottom: 3.5rem;
        }
        .wall-counter-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.7rem, 3.8vw, 2.6rem);
            font-weight: 700;
            color: var(--diya-text);
            margin-bottom: 0.5rem;
            line-height: 1.2;
        }
        .wall-count-num {
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .wall-hint {
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            color: var(--diya-text-muted);
            letter-spacing: 0.05em;
        }
        /* ---- The grid ---- */
        .diya-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 1.4rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* ---- Mini Diya ---- */
        .mini-diya-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            padding: 0.55rem 0.25rem;
            border-radius: 14px;
            border: none;
            background: transparent;
            transition: transform var(--t-fast), background var(--t-fast);
        }
        .mini-diya-wrapper:hover,
        .mini-diya-wrapper.active {
            transform: translateY(-5px);
            background: rgba(212, 168, 75, 0.04);
        }
        .mini-glow-ring {
            position: absolute;
            top: -2px; left: 50%;
            transform: translateX(-50%);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: radial-gradient(ellipse,
                rgba(212, 168, 75, 0.22) 0%,
                rgba(212, 168, 75, 0.04) 55%,
                transparent 70%
            );
            animation: miniGlowPulse var(--glow-dur, 2.5s) ease-in-out var(--glow-delay, 0s) infinite alternate;
            pointer-events: none;
            z-index: 0;
        }
        @keyframes miniGlowPulse {
            0%   { opacity: 0.38; transform: translateX(-50%) scale(0.88); }
            100% { opacity: 0.95; transform: translateX(-50%) scale(1.18); }
        }
        .mini-flame-assembly {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
        }
        .mini-flame-wrap {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .mini-flame-outer {
            width: 10px;
            height: 20px;
            border-radius: 50% 50% 34% 34% / 60% 60% 40% 40%;
            background: linear-gradient(to top, var(--flame-outer) 0%, var(--flame-mid) 55%, var(--flame-inner) 100%);
            animation: miniFlicker var(--flicker-speed, 1.8s) ease-in-out var(--flicker-delay, 0s) infinite;
            filter: blur(0.4px);
            transform-origin: bottom center;
            box-shadow: 0 0 6px rgba(255, 140, 0, 0.40);
            transition: transform var(--t-fast);
        }
        .mini-diya-wrapper:hover .mini-flame-outer,
        .mini-diya-wrapper.active .mini-flame-outer {
            transform: scale(1.30);
            box-shadow: 0 0 12px rgba(255, 140, 0, 0.65), 0 0 22px rgba(255, 100, 0, 0.25);
        }
        .mini-flame-inner {
            position: absolute;
            top: 5px; left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 12px;
            border-radius: 50% 50% 40% 40% / 62% 62% 38% 38%;
            background: linear-gradient(to top, #FFE566 0%, #FFFFFF 100%);
            animation: miniFlickerInner var(--flicker-speed-inner, 2.2s) ease-in-out var(--flicker-delay, 0s) infinite;
        }
        @keyframes miniFlicker {
            0%,100% { transform: scaleX(1.00) scaleY(1.00) skewX(0.0deg);  opacity: 0.96; }
            20%     { transform: scaleX(0.87) scaleY(1.10) skewX(-3.0deg); opacity: 1.00; }
            40%     { transform: scaleX(1.11) scaleY(0.93) skewX( 2.0deg); opacity: 0.88; }
            60%     { transform: scaleX(0.95) scaleY(1.05) skewX(-1.5deg); opacity: 0.97; }
            80%     { transform: scaleX(1.05) scaleY(0.97) skewX( 1.0deg); opacity: 0.92; }
        }
        @keyframes miniFlickerInner {
            0%,100% { transform: translateX(-50%) scaleY(1.00); opacity: 0.90; }
            30%     { transform: translateX(-50%) scaleY(1.16); opacity: 1.00; }
            65%     { transform: translateX(-50%) scaleY(0.86); opacity: 0.72; }
        }
        .mini-wick {
            width: 2px;
            height: 6px;
            background: linear-gradient(to top, #4A3000, #9A6020);
            border-radius: 1px;
        }
        .mini-bowl {
            position: relative;
            width: 34px;
            height: 12px;
            background: linear-gradient(180deg, #CA9830 0%, #8A5E18 100%);
            border-radius: 0 0 20px 20px / 0 0 13px 13px;
            box-shadow:
                0 2px 10px rgba(212, 168, 75, 0.38),
                0 0  18px rgba(212, 168, 75, 0.12);
            overflow: hidden;
        }
        .mini-bowl::before {
            content: '';
            position: absolute;
            top: 1px; left: 8%; right: 8%;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(255, 220, 100, 0.45), transparent);
            border-radius: 50%;
        }
        .mini-base {
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #5A3800, #C08030, #E8B84B, #C08030, #5A3800);
            border-radius: 0 0 20px 20px;
            margin-top: -1px;
        }
        .mini-name {
            margin-top: 0.45rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.58rem;
            font-weight: 600;
            color: var(--gold-2);
            text-align: center;
            letter-spacing: 0.04em;
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
        }
        /* New diya sparkle entrance */
        .mini-diya-wrapper.new-diya {
            animation: newDiyaEntrance 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        @keyframes newDiyaEntrance {
            0%   { transform: scale(0.0) translateY(22px); opacity: 0; filter: brightness(4) saturate(2); }
            35%  { filter: brightness(2.5) saturate(1.5); }
            70%  { filter: brightness(1.5); }
            100% { transform: scale(1.0) translateY(0);   opacity: 1; filter: brightness(1); }
        }
        /* ---- TOOLTIP ---- */
        .diya-tooltip {
            position: absolute;
            bottom: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 272px;
            background: var(--tooltip-bg);
            border: 1px solid rgba(212, 168, 75, 0.38);
            border-radius: 15px;
            padding: 1.15rem 1.25rem;
            z-index: 600;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s ease, transform 0.25s ease;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow:
                0 12px 40px rgba(0, 0, 0, 0.75),
                0  2px 12px rgba(212, 168, 75, 0.06);
        }
        .diya-tooltip.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .diya-tooltip.below {
            bottom: auto;
            top: calc(100% + 14px);
        }
        .diya-tooltip.below::after  { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(212, 168, 75, 0.38); }
        .diya-tooltip.below::before { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 1px; border-top-color: transparent; border-bottom-color: var(--tooltip-bg); }
        .diya-tooltip::after {
            content: '';
            position: absolute;
            top: 100%; left: 50%;
            transform: translateX(-50%);
            border: 7px solid transparent;
            border-top-color: rgba(212, 168, 75, 0.38);
        }
        .diya-tooltip::before {
            content: '';
            position: absolute;
            top: 100%; left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--tooltip-bg);
            z-index: 1;
            margin-top: 1px;
        }
        .diya-tooltip.edge-right {
            left: 0;
            transform: translateX(0) translateY(10px);
        }
        .diya-tooltip.edge-right.visible { transform: translateX(0) translateY(0); }
        .diya-tooltip.edge-right::after,
        .diya-tooltip.edge-right::before { left: 18px; transform: none; }
        .diya-tooltip.edge-left {
            left: auto; right: 0;
            transform: translateX(0) translateY(10px);
        }
        .diya-tooltip.edge-left.visible { transform: translateX(0) translateY(0); }
        .diya-tooltip.edge-left::after,
        .diya-tooltip.edge-left::before { left: auto; right: 18px; transform: none; }
        .tooltip-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.6rem;
        }
        .tooltip-diya-icon { font-size: 0.9rem; }
        .tooltip-for {
            font-family: 'Playfair Display', serif;
            font-size: 1.02rem;
            font-weight: 700;
            color: var(--gold-2);
        }
        .tooltip-divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, rgba(212,168,75,0.25), transparent);
            margin-bottom: 0.6rem;
        }
        .tooltip-prayer {
            font-family: 'Caveat', cursive;
            font-size: 1.1rem;
            color: var(--diya-text);
            line-height: 1.52;
            margin-bottom: 0.7rem;
        }
        .tooltip-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        .tooltip-by {
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            color: var(--diya-text-sec);
        }
        .tooltip-time {
            font-family: 'Manrope', sans-serif;
            font-size: 0.66rem;
            color: var(--diya-text-muted);
            font-style: italic;
        }
        /* ============================================================
           RECENT PRAYERS TICKER
        ============================================================ */
        .ticker-section {
            padding: 2.2rem 0 2rem;
            background: rgba(5, 9, 14, 0.95);
            border-top: 1px solid var(--glass-border);
            border-bottom: 1px solid var(--glass-border);
            overflow: hidden;
            position: relative;
        }
        .ticker-label {
            text-align: center;
            font-family: 'Manrope', sans-serif;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--gold-dim);
            margin-bottom: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        .ticker-live-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #FF4444;
            box-shadow: 0 0 5px rgba(255, 68, 68, 0.7);
            animation: liveDotPulse 1.4s ease-in-out infinite;
        }
        @keyframes liveDotPulse {
            0%, 100% { opacity: 1; transform: scale(1.0); }
            50%       { opacity: 0.4; transform: scale(0.7); }
        }
        .ticker-overflow {
            overflow: hidden;
            position: relative;
        }
        .ticker-overflow::before,
        .ticker-overflow::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0;
            width: 80px;
            z-index: 2;
            pointer-events: none;
        }
        .ticker-overflow::before { left: 0;  background: linear-gradient(to right, rgba(5,9,14,0.95), transparent); }
        .ticker-overflow::after  { right: 0; background: linear-gradient(to left,  rgba(5,9,14,0.95), transparent); }
        .ticker-track {
            display: flex;
            gap: 0;
            animation: tickerScroll 36s linear infinite;
            width: max-content;
        }
        .ticker-track:hover { animation-play-state: paused; }
        @keyframes tickerScroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .ticker-item {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0 2.8rem;
            white-space: nowrap;
        }
        .ticker-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--gold-1);
            opacity: 0.6;
            flex-shrink: 0;
            animation: tickerDotPulse 2s ease-in-out infinite alternate;
        }
        @keyframes tickerDotPulse {
            0%   { opacity: 0.35; }
            100% { opacity: 0.85; }
        }
        .ticker-time-text {
            font-family: 'Manrope', sans-serif;
            font-size: 0.75rem;
            color: var(--diya-text-muted);
            font-style: italic;
        }
        .ticker-message {
            font-family: 'Manrope', sans-serif;
            font-size: 0.82rem;
            color: var(--diya-text-sec);
        }
        .ticker-name-highlight {
            color: var(--gold-2);
            font-weight: 600;
        }
        /* ============================================================
           QUOTE + STATS BAR
        ============================================================ */
        .quote-section {
            padding: 6rem 2rem;
            background: var(--diya-bg);
            text-align: center;
            position: relative;
        }
        .quote-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(212, 168, 75, 0.03) 0%, transparent 60%);
            pointer-events: none;
        }
        .quote-marks {
            font-family: 'Playfair Display', serif;
            font-size: 5rem;
            line-height: 0.5;
            color: var(--gold-border);
            margin-bottom: 1.5rem;
            display: block;
        }
        .big-quote {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.55rem, 4.5vw, 2.8rem);
            font-weight: 400;
            font-style: italic;
            background: linear-gradient(145deg, var(--gold-2) 0%, var(--gold-3) 45%, var(--gold-1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            max-width: 720px;
            margin: 0 auto 1rem;
            line-height: 1.42;
        }
        .quote-attribution {
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            color: var(--diya-text-muted);
            letter-spacing: 0.1em;
            margin-bottom: 4rem;
        }
        /* Stats bar */
        .stats-bar {
            display: flex;
            justify-content: center;
            align-items: stretch;
            max-width: 760px;
            margin: 0 auto;
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            background: var(--glass-bg);
        }
        .stat-item {
            flex: 1;
            padding: 2rem 1.5rem;
            text-align: center;
            position: relative;
        }
        .stat-item + .stat-item {
            border-left: 1px solid var(--glass-border);
        }
        .stat-icon {
            font-size: 1.4rem;
            margin-bottom: 0.6rem;
            display: block;
        }
        .stat-number {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.9rem, 4.5vw, 2.8rem);
            font-weight: 700;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: block;
            line-height: 1;
            margin-bottom: 0.45rem;
        }
        .stat-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--diya-text-sec);
            letter-spacing: 0.06em;
        }
        .stat-label.emotional {
            color: var(--gold-2);
            font-weight: 700;
        }
        .stat-sub {
            font-family: 'Manrope', sans-serif;
            font-size: 0.65rem;
            color: var(--diya-text-muted);
            margin-top: 0.2rem;
        }
        /* ============================================================
           CLOSING CTA
        ============================================================ */
        .cta-section {
            padding: 6rem 2rem;
            text-align: center;
            background: var(--diya-bg-darker);
            border-top: 1px solid var(--glass-border);
            position: relative;
        }
        .cta-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,168,75,0.03) 0%, transparent 60%);
            pointer-events: none;
        }
        .cta-headline {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.5rem, 4vw, 2.4rem);
            font-weight: 600;
            color: var(--diya-text);
            max-width: 640px;
            margin: 0 auto 2.8rem;
            line-height: 1.48;
        }
        .cta-headline em {
            font-style: italic;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 2.2rem;
        }
        .btn-teal-outline {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.78rem 1.9rem;
            border: 1px solid var(--teal-1);
            color: var(--teal-2);
            border-radius: 11px;
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            transition: background, color, box-shadow, transform, opacity var(--t-med);
            text-decoration: none;
        }
        .btn-teal-outline:hover {
            background: rgba(0, 180, 216, 0.08);
            box-shadow: 0 0 24px rgba(0, 180, 216, 0.14);
            transform: translateY(-1px);
            color: var(--teal-2);
        }
        .btn-home {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.78rem 1.7rem;
            color: var(--diya-text-sec);
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 11px;
            transition: background, color, box-shadow, transform, opacity var(--t-fast);
            text-decoration: none;
        }
        .btn-home:hover {
            color: var(--diya-text);
            border-color: rgba(255,255,255,0.25);
        }
        .cta-note {
            font-family: 'Manrope', sans-serif;
            font-size: 0.76rem;
            color: var(--diya-text-muted);
            max-width: 440px;
            margin: 0 auto;
            line-height: 1.65;
        }
        /* ============================================================
           LOADING SKELETON FOR WALL
        ============================================================ */
        .wall-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.8rem;
            padding: 3rem 0;
            color: var(--diya-text-muted);
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
        }
        .wall-loading-dots span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--gold-1);
            margin: 0 2px;
            animation: loadingDot 1.2s ease-in-out infinite;
        }
        .wall-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
        .wall-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes loadingDot {
            0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
            40%           { transform: scale(1.2); opacity: 1; }
        }
        /* ============================================================
           RESPONSIVE
        ============================================================ */
        @media (max-width: 900px) {
            .diya-grid {
                grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
                gap: 1.1rem;
            }
        }
        @media (max-width: 768px) {
            .diya-hero { padding: 6.5rem 1.5rem 4.5rem; }
            .form-section { padding: 5rem 1.5rem; }
            .form-card { padding: 2.2rem 1.5rem; }
            .wall-section { padding: 5rem 1.5rem; }
            .quote-section { padding: 4.5rem 1.5rem; }
            .cta-section { padding: 5rem 1.5rem; }
            .stats-bar { flex-direction: column; border-radius: 18px; }
            .stat-item + .stat-item { border-left: none; border-top: 1px solid var(--glass-border); }
            .diya-grid {
                grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
                gap: 0.9rem;
            }
            .cta-buttons { flex-direction: column; align-items: center; }
            .calendar-panel { padding: 1rem; }
            .filter-quote { font-size: 1.15rem; }
        }
        @media (max-width: 480px) {
            .hero-title { font-size: 2.1rem; }
            .diya-grid {
                grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
                gap: 0.75rem;
            }
            .mini-bowl { width: 28px; height: 10px; }
            .mini-flame-outer { width: 8px; height: 17px; }
            .mini-base { width: 34px; }
        }
        /* Touch device: disable hover-intent tooltips, use tap */
        @media (hover: none) and (pointer: coarse) {
            .mini-diya-wrapper:hover .diya-tooltip {
                opacity: 0 !important;
                transform: translateX(-50%) translateY(10px) !important;
            }
            .mini-diya-wrapper:hover {
                transform: none;
                background: none;
            }
            .mini-diya-wrapper.active { transform: translateY(-4px); }
            .mini-diya-wrapper.active .diya-tooltip.visible {
                opacity: 1 !important;
                transform: translateX(-50%) translateY(0) !important;
            }
        }
        /* Footer from styles.css — fix text colors for dark bg */
        .footer .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
        }
        .footer-brand .footer-logo {
            font-family: 'Playfair Display', serif !important;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gold-2) !important;
            margin-bottom: 0.4rem;
        }
        .footer-brand .footer-logo span {
            background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .footer-brand p {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--diya-text-muted) !important;
        }
        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.4rem 1.2rem;
        }
        .footer-links a {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--diya-text-muted) !important;
            text-decoration: none;
            transition: color var(--t-fast);
        }
        .footer-links a:hover {
            color: var(--gold-2) !important;
        }
        .footer-disclaimer {
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            color: var(--diya-text-faint) !important;
            max-width: 500px;
            line-height: 1.6;
            text-align: center;
        }

        /* ── AMBIENT GLOW ANIMATION ────────────────────── */
        @keyframes ambientGlow {
            0%, 100% {
                box-shadow: 0 0 8px rgba(212, 168, 75, 0.15),
                            0 0 20px rgba(255, 140, 0, 0.08);
            }
            50% {
                box-shadow: 0 0 14px rgba(212, 168, 75, 0.30),
                            0 0 35px rgba(255, 140, 0, 0.15),
                            0 0 50px rgba(255, 100, 0, 0.06);
            }
        }

        .mini-diya-wrapper {
            animation: ambientGlow 3s ease-in-out infinite;
            animation-delay: calc(var(--diya-index, 0) * 0.15s);
        }

        .mini-diya-wrapper:nth-child(even) {
            animation-duration: 3.5s;
        }

        .mini-diya-wrapper:nth-child(3n) {
            animation-duration: 4s;
        }

        @media (prefers-reduced-motion: reduce) {
            .mini-diya-wrapper {
                animation: none;
                box-shadow: 0 0 8px rgba(212, 168, 75, 0.15);
            }
        }