body {
      min-height: 100vh;
      font-family: "Poppins", system-ui, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% 12%, rgba(255, 244, 205, .85), transparent 38%),
        radial-gradient(circle at 8% 30%, rgba(255, 213, 120, .5), transparent 30%),
        radial-gradient(circle at 92% 30%, rgba(255, 213, 120, .5), transparent 30%),
        linear-gradient(180deg, #d9791e 0%, #eb9a30 30%, #f7c26c 62%, #fde7bd 100%);
      background-attachment: fixed;
      overflow-x: hidden;
    }
    h1, h2, .brand { font-family: "Playfair Display", Georgia, serif; }

    /* Top bar */
    .topbar { padding: 1rem 0; }
    .brand { color: #fff; font-size: 1.6rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
    .topbar .nav-link { color: #fff3dc; font-size: .95rem; padding: .4rem .8rem; }
    .topbar .nav-link:hover { color: #fff; }
    .btn-pill-light { background: #fff; color: var(--maroon); font-weight: 600; border-radius: 2rem; padding: .45rem 1.4rem; border: 0; }

    /* Hero */
    .hero { padding: 1rem 0 0; position: relative; }
    .deity {
     width: 328px;
    height: 328px; margin: 0 auto;
      border-radius: 50%;
      display: grid; place-items: center;
      font-size: 5.5rem;
      background: radial-gradient(circle, #fff6cf 0%, #ffd766 55%, #f0a532 100%);
      box-shadow: 0 0 0 8px rgba(255, 236, 170, .35), 0 0 60px 14px rgba(255, 214, 102, .7);
      overflow: hidden;
    }
    .deity-img {
      max-width: 150%;
      
      object-fit: cover;
      border-radius: 50%;
    }
    .donationHero h1 { color: #fff; font-weight: 800; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.05; text-shadow: 0 0px 10px #090707;margin-top: -110px; }
    .hero p { color: #fff6df; font-weight: 500; font-size: clamp(1rem, 2.2vw, 1.25rem); text-shadow: 0 1px 6px rgba(120, 40, 0, .4); }

    /* Side arches (desktop only) */
    .arch {
      position: absolute; top: 30px; width: 230px; height: 330px;
      border: 5px solid var(--gold); border-radius: 115px 115px 20px 20px;
      background: linear-gradient(180deg, rgba(122, 31, 11, .85), rgba(196, 90, 12, .55));
      box-shadow: 0 10px 30px rgba(90, 30, 0, .35);
      display: grid; place-items: center; font-size: 4.5rem;
    }
    .arch.left { left: 2%; }
    .arch.right { right: 2%; }

    /* Donation pill card */
    .donate-card {
      position: relative; z-index: 2;
      background: linear-gradient(180deg, #fffdf6, var(--cream));
      border: 4px solid var(--gold);
      border-radius: 3rem;
      box-shadow: 0 14px 40px rgba(120, 50, 0, .35);
      padding: 1.75rem 1.5rem 2rem;
    }
    .section-title { color: var(--maroon); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: center; }
    .section-title::before, .section-title::after { content: "✦"; color: var(--amber-3); font-size: .55em; vertical-align: middle; margin: 0 .6rem; }

    .amount-chip {
      min-width: 92px; padding: .6rem 1.2rem;
      border-radius: 1rem; font-weight: 600; font-size: 1.15rem;
      background: #fffaf0; color: var(--ink);
      border: 1.5px solid #e6c48a;
      transition: all .15s;
    }
    .amount-chip:hover { border-color: var(--amber-3); }
    .amount-chip.active {
      color: #fff; border-color: transparent;
      background: linear-gradient(180deg, #f9ad42, var(--amber-3));
      box-shadow: 0 5px 12px rgba(200, 90, 10, .4);
    }

    .custom-amount { display: flex; border-radius: 2rem; overflow: hidden; border: 1.5px solid #e6c48a; background: #fff; }
    .custom-amount input { border: 0; box-shadow: none; padding: .85rem 1.4rem; font-size: 1.05rem; background: transparent; }
    .custom-amount .tag {
      background: linear-gradient(90deg, #f6a03a, var(--amber-3)); color: #fff; font-weight: 600;
      display: flex; align-items: center; padding: 0 1.5rem; white-space: nowrap;
    }

    /* Blessing + purposes panel */
    .blessing-panel {
      position: relative; z-index: 1;
      margin-top: -2.5rem; padding-top: 4rem;
      background: linear-gradient(180deg, var(--cream), var(--cream-2));
      border-radius: 3rem 3rem 0 0;
      box-shadow: 0 -4px 30px rgba(120, 50, 0, .15);
    }
    .divider { color: var(--amber-3); letter-spacing: .5rem; text-align: center; }
    .blessing { max-width: 640px; margin: .5rem auto 2rem; text-align: center; font-size: 1.1rem; }

    .purpose { position: relative; }
    .purpose input { position: absolute; opacity: 0; inset: 0; }
    .purpose label {
      height: 100%; width: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
      padding: 1.1rem .75rem; text-align: center; cursor: pointer;
      background: #fffaf0; border: 2px solid #ecca8f; border-radius: 1.25rem;
      font-weight: 600; line-height: 1.25; color: var(--maroon);
      transition: all .15s;
    }
    .purpose .icon { font-size: 1.8rem; }
    .purpose label:hover { border-color: var(--amber-3); transform: translateY(-2px); }
    .purpose input:checked + label { border-color: var(--amber-3); background: #fff1d6; box-shadow: 0 6px 16px rgba(232, 120, 26, .35); }
    .purpose input:focus-visible + label { outline: 3px solid var(--maroon); outline-offset: 2px; }

    /* Payment row */
    .pay-icon { width: 44px; height: 44px; border-radius: 50%; background: #2b2a6b; color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
    .pay-input { border-radius: 2rem; border: 1.5px solid #e6c48a; padding: .8rem 1.3rem; background: #fff; }
    .pay-input:focus { border-color: var(--amber-3); box-shadow: 0 0 0 .25rem rgba(232, 120, 26, .25); }
    .btn-donate {
      color: #fff; font-weight: 600; font-size: 1.15rem; border: 0; border-radius: 2rem; padding: .85rem 2.2rem;
      background: linear-gradient(180deg, #f8a83e, var(--amber-4));
      box-shadow: 0 6px 16px rgba(196, 90, 12, .45);
    }
    .btn-donate:hover { color: #fff; filter: brightness(1.07); }
    .btn-donate:focus-visible, .btn-pill-light:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }

    .footer { padding: 1.5rem 0 2rem; background: var(--cream-2); text-align: center; font-size: .9rem; }

    @media (max-width: 991.98px) { .arch { display: none; } .donate-card { border-radius: 2rem; } }
    @media (max-width: 575.98px) {
      .donationHero h1{margin-top:-50px; }  
          .deity { width: 200px; height: 200px; font-size: 4rem; }
      .amount-chip { min-width: 84px; padding: .5rem .9rem; }
      .custom-amount .tag { padding: 0 1rem; font-size: .85rem; }
      .blessing-panel { border-radius: 2rem 2rem 0 0; }
    }