/* ==========================================================
   Nuran Foundation — public site design system
   Loaded after Tailwind (CDN). Components + motion live here.
   ========================================================== */
:root {
    --brand-50:#ECFDF5; --brand-100:#D1FAE5; --brand-200:#A7F3D0; --brand-300:#6EE7B7;
    --brand-400:#34D399; --brand-500:#10B981; --brand-600:#059669; --brand-700:#047857;
    --brand-800:#065F46; --brand-900:#064E3B; --brand-950:#022C22;
    --ink:#0F172A; --muted:#64748B; --line:#E2E8F0; --bg:#FFFFFF; --soft:#F6F8F7;
    --sun:#F59E0B; --coral:#F43F5E;
    --radius:20px;
    --ease: cubic-bezier(.16,1,.3,1);
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; }
::selection { background: var(--brand-200); color: var(--brand-950); }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; border-radius: 6px; }

/* ---------- Header ---------- */
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease), padding .3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(2,44,34,.18); background: rgba(255,255,255,.96); }
.nav-link { position: relative; padding: .5rem .2rem; color: #334155; font-weight: 600; font-size: .9rem; transition: color .2s; }
.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand-600); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); border-radius:2px; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--brand-700); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:999px; transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s; white-space:nowrap; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color:#fff; box-shadow: 0 10px 24px -10px rgba(5,150,105,.7); }
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(5,150,105,.9); transform: translateY(-1px); }
.btn-ghost { background:#fff; color: var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand-600); color: var(--brand-700); }
.btn-dark { background: var(--ink); color:#fff; }
.btn-dark:hover { background: var(--brand-800); }
.btn-white { background:#fff; color: var(--brand-800); }
.btn-white:hover { background: var(--brand-50); }
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation: btnShine 3.6s ease-in-out infinite; }
@keyframes btnShine { 0%,60% { left:-60%; } 100% { left:130%; } }

/* ---------- Section helpers ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--brand-700); }
.eyebrow::before { content:""; width:18px; height:2px; background: currentColor; border-radius:2px; }
.section-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height:1.1; font-weight:800; letter-spacing:-.02em; color: var(--ink); }
.text-gradient { background: linear-gradient(120deg, var(--brand-500), var(--brand-800) 60%, #0E7490); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); }
.soft-bg { background: var(--soft); }
.dot-grid { background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; }
.dot-grid-dark { background-image: radial-gradient(rgba(15,23,42,.07) 1px, transparent 1px); background-size: 18px 18px; }

/* ---------- Progress bar ---------- */
.bar { height:8px; background:#E8EEEB; border-radius:999px; overflow:hidden; position:relative; }
.bar__fill { display:block; height:100%; width:0; border-radius:999px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); transition: width 1.4s var(--ease); position:relative; }
.bar__fill::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); transform:translateX(-100%); animation: shine 2.8s ease-in-out infinite; }
@keyframes shine { to { transform: translateX(100%); } }

/* ---------- Fundraiser card ---------- */
.fund-card { display:flex; flex-direction:column; background:#fff; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.fund-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(2,44,34,.35); border-color: transparent; }
.fund-card__media { position:relative; aspect-ratio: 16/10; overflow:hidden; background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); }
.fund-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.fund-card:hover .fund-card__media img { transform: scale(1.07); }
.fund-card__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--brand-300); font-size:3rem; }
.fund-card__placeholder i { transition: transform .6s var(--ease); }
.fund-card:hover .fund-card__placeholder i { transform: scale(1.15) rotate(-6deg); }
.fund-card__chip { z-index:3; position:absolute; top:12px; left:12px; background:rgba(255,255,255,.95); color: var(--brand-800); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .65rem; border-radius:999px; }
.fund-card__loc { position:absolute; bottom:10px; left:12px; color:#fff; font-size:.72rem; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.fund-card__body { padding: 1.1rem 1.2rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.fund-card__title { font-weight:800; font-size:1.02rem; line-height:1.35; color: var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.fund-card:hover .fund-card__title { color: var(--brand-700); }
.fund-card__by { font-size:.75rem; color: var(--muted); }
.fund-card__by i { color: var(--brand-600); margin-right:.2rem; }
.fund-card__raised { font-size:.9rem; margin-top:.15rem; }
.fund-card__raised span { color: var(--muted); font-size:.82rem; }
.fund-card__meta { display:flex; justify-content:space-between; font-size:.75rem; color: var(--muted); font-weight:600; }

/* ---------- Category chips ---------- */
.chip { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:.85rem; color:#334155; transition: all .25s var(--ease); }
.chip:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(5,150,105,.5); }
.chip.is-active { background: var(--ink); color:#fff; border-color: var(--ink); }
.chip i { color: var(--brand-600); }
.chip.is-active i { color: var(--brand-300); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background: radial-gradient(1200px 600px at 85% -10%, #D1FAE5 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #E0F2FE 0%, transparent 55%), #F7FBF9; }
.hero-blob { position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; animation: blobFloat 16s ease-in-out infinite alternate; pointer-events:none; }
@keyframes blobFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,-30px) scale(1.12); } }
.float-card { position:absolute; background:#fff; border-radius:18px; box-shadow: 0 24px 50px -20px rgba(2,44,34,.35); border:1px solid rgba(226,232,240,.8); animation: floatY 6s ease-in-out infinite; }
.float-card.delay-1 { animation-delay: -2s; } .float-card.delay-2 { animation-delay: -4s; }
@keyframes floatY { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
/* Typewriter (one text node → gradient text works correctly) */
.typer { display:inline-block; min-height:1.1em; }
.typer::after { content:""; display:inline-block; width:.08em; height:.9em; margin-left:.06em; vertical-align:-.08em; background: var(--brand-600); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }

/* ---------- GoFundMe-style centred hero ---------- */
.hero-center { position:relative; overflow:hidden; background: radial-gradient(900px 520px at 50% -10%, #DCFCE7 0%, transparent 65%), #FBFDFC; }
.bubble { position:absolute; width: var(--s,150px); height: var(--s,150px); border-radius:50%; overflow:hidden; box-shadow: 0 24px 50px -22px rgba(2,44,34,.45); animation: floatY 7s ease-in-out infinite; border:6px solid #fff; }
.bubble .cause-art i { font-size: calc(var(--s,150px) * .3); }
.bubble__tag { position:absolute; white-space:nowrap; background:#fff; border-radius:999px; padding:.35rem .8rem; font-size:.75rem; font-weight:800; color: var(--ink); box-shadow: 0 10px 24px -12px rgba(2,44,34,.45); display:flex; align-items:center; gap:.4rem; animation: floatY 7s ease-in-out infinite; }
.bubble__tag i { color: var(--brand-600); }
@media (max-width: 1023px) { .bubble, .bubble__tag { display:none; } }

/* Illustrated cause artwork (used when no photo uploaded) */
.cause-art { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:3.2rem; overflow:hidden; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg, var(--a), var(--b)); }
.cause-art i { position:relative; z-index:2; filter: drop-shadow(0 8px 16px rgba(0,0,0,.2)); transition: transform .6s var(--ease); }
.cause-art__ring { position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.28); animation: ringPulse 6s ease-in-out infinite; }
.cause-art__ring.r1 { width:60%; aspect-ratio:1; } .cause-art__ring.r2 { width:95%; aspect-ratio:1; animation-delay:-3s; }
@keyframes ringPulse { 0%,100% { transform: scale(.9); opacity:.5; } 50% { transform: scale(1.06); opacity:1; } }
.fund-card:hover .cause-art i { transform: scale(1.15) rotate(-6deg); }
.fund-card__cta { margin-top:auto; padding-top:.6rem; font-weight:800; font-size:.85rem; color: var(--brand-700); display:inline-flex; align-items:center; gap:.4rem; }
.fund-card__cta i { transition: transform .3s var(--ease); }
.fund-card:hover .fund-card__cta i { transform: translateX(4px); }

/* Horizontal carousel */
.carousel { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(280px, 1fr); gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding: .5rem .25rem 1.5rem; scrollbar-width:none; }
.carousel::-webkit-scrollbar { display:none; }
.carousel > * { scroll-snap-align:start; }
@media (min-width: 1024px) { .carousel { grid-auto-columns: calc((100% - 3 * 1.5rem) / 4); } }
.car-btn { width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; transition: all .2s var(--ease); }
.car-btn:hover { border-color: var(--ink); background: var(--ink); color:#fff; }

/* Animated phone demo */
.phone { width: 290px; border-radius: 42px; background:#0F172A; padding: 12px; box-shadow: 0 40px 80px -30px rgba(2,44,34,.55); position:relative; }
.phone__screen { background:#fff; border-radius: 32px; overflow:hidden; height: 560px; position:relative; }
.phone__notch { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:110px; height:26px; background:#0F172A; border-radius:0 0 16px 16px; z-index:3; }
.demo-amt { animation: demoPulse 4s ease-in-out infinite; }
@keyframes demoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.demo-toast { position:absolute; left:14px; right:14px; bottom:16px; background: var(--ink); color:#fff; border-radius:16px; padding:.75rem .9rem; font-size:.75rem; display:flex; gap:.6rem; align-items:center; animation: toastCycle 6s var(--ease) infinite; }
@keyframes toastCycle { 0%,35% { transform: translateY(140%); opacity:0; } 45%,85% { transform:none; opacity:1; } 100% { transform: translateY(140%); opacity:0; } }
.demo-cursor { position:absolute; width:22px; height:22px; border-radius:50%; background: rgba(16,185,129,.35); border:2px solid var(--brand-600); animation: tap 6s var(--ease) infinite; z-index:4; }
@keyframes tap { 0% { left:70%; top:40%; } 20% { left:58%; top:44%; transform: scale(1); } 24% { transform: scale(.7); } 28% { transform: scale(1); } 35% { left:45%; top:83%; transform: scale(1); } 39% { transform: scale(.7); } 43%,100% { left:45%; top:83%; transform: scale(1); opacity:0; } }

/* Receipt mock-up */
.receipt-mock { background:#fff; border-radius:20px; box-shadow: 0 30px 60px -28px rgba(2,44,34,.45); padding:1.4rem; position:relative; transform: rotate(-2deg); transition: transform .5s var(--ease); }
.receipt-mock:hover { transform: rotate(0) translateY(-6px); }
.receipt-mock::after { content:""; position:absolute; left:0; right:0; bottom:-10px; height:20px; background: radial-gradient(circle at 10px -2px, transparent 12px, #fff 13px) repeat-x; background-size:20px 20px; }
.stamp { position:absolute; right:18px; top:62px; border:3px solid var(--brand-600); color: var(--brand-700); font-weight:900; font-size:.7rem; letter-spacing:.12em; padding:.3rem .6rem; border-radius:8px; transform: rotate(12deg); opacity:.85; }

/* Big number band */
.mega { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight:800; letter-spacing:-.03em; line-height:1; }

/* Pulse ring (live dot) */
.live-dot { position:relative; width:8px; height:8px; border-radius:50%; background: var(--brand-500); display:inline-block; }
.live-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--brand-500); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.6); opacity:1; } to { transform: scale(2); opacity:0; } }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display:flex; gap:2.5rem; width:max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Steps / timeline ---------- */
.step-num { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; color:#fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); box-shadow: 0 12px 24px -12px rgba(5,150,105,.8); }
.timeline { position:relative; }
.timeline::before { content:""; position:absolute; left:25px; top:10px; bottom:10px; width:2px; background: linear-gradient(var(--brand-300), var(--brand-700)); }

/* ---------- Icon tile ---------- */
.icon-tile { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: var(--brand-50); color: var(--brand-700); font-size:1.15rem; transition: transform .4s var(--ease), background .3s, color .3s; flex-shrink:0; }
.hover-lift { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(2,44,34,.35); border-color: var(--brand-200); }
.hover-lift:hover .icon-tile { background: var(--brand-600); color:#fff; transform: rotate(-6deg) scale(1.05); }

/* ---------- Progress ring ---------- */
.ring { --p:0; width:96px; height:96px; }
.ring circle { fill:none; stroke-width:9; }
.ring .ring__bg { stroke:#E8EEEB; }
.ring .ring__fg { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.6s var(--ease); transform: rotate(-90deg); transform-origin: 50% 50%; }

/* ---------- Forms ---------- */
.field { width:100%; border:1.5px solid var(--line); border-radius:14px; padding:.8rem 1rem; font-size:.92rem; background:#fff; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline:none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.label { display:block; font-size:.75rem; font-weight:700; color:#475569; margin-bottom:.35rem; }
.amt-btn { border:1.5px solid var(--line); border-radius:14px; padding:.8rem .5rem; font-weight:800; font-size:.95rem; background:#fff; transition: all .2s var(--ease); position:relative; }
.amt-btn:hover { border-color: var(--brand-400); }
.amt-btn.is-active { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-800); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.amt-btn .tag { position:absolute; top:-9px; left:50%; transform:translateX(-50%); background: var(--sun); color:#fff; font-size:.58rem; letter-spacing:.06em; padding:.1rem .45rem; border-radius:999px; text-transform:uppercase; }
.switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:#CBD5E1; border-radius:999px; transition: background .25s; cursor:pointer; }
.switch span::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform .25s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--brand-600); }
.switch input:checked + span::before { transform: translateX(20px); }

/* ---------- Tabs ---------- */
.tab-btn { padding:.75rem .25rem; font-weight:700; font-size:.9rem; color: var(--muted); border-bottom:2.5px solid transparent; transition: color .2s, border-color .2s; }
.tab-btn.is-active { color: var(--ink); border-color: var(--brand-600); }

/* ---------- FAQ ---------- */
details.faq { border:1px solid var(--line); border-radius:16px; background:#fff; transition: box-shadow .3s, border-color .3s; }
details.faq[open] { border-color: var(--brand-200); box-shadow: 0 14px 30px -20px rgba(2,44,34,.3); }
details.faq summary { list-style:none; cursor:pointer; padding:1.1rem 1.25rem; font-weight:700; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:.95rem; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary .pm { width:28px; height:28px; border-radius:50%; background: var(--brand-50); color: var(--brand-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .35s var(--ease), background .3s; }
details.faq[open] summary .pm { transform: rotate(45deg); background: var(--brand-600); color:#fff; }
details.faq .faq-body { padding: 0 1.25rem 1.2rem; color:#475569; font-size:.9rem; line-height:1.7; }

/* ---------- Scroll reveal ---------- */
[data-animate] { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-animate="left"] { transform: translateX(-36px); }
[data-animate="right"] { transform: translateX(36px); }
[data-animate="zoom"] { transform: scale(.92); }
[data-animate].in-view { opacity:1; transform:none; }

/* Mobile sticky donate bar */
.mobile-cta { position:fixed; left:0; right:0; bottom:0; z-index:40; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top:1px solid var(--line); transform: translateY(110%); transition: transform .4s var(--ease); }
.mobile-cta.is-on { transform:none; }

/* Toast */
.toast { position:fixed; left:50%; bottom:24px; transform: translate(-50%, 140%); background: var(--ink); color:#fff; padding:.75rem 1.2rem; border-radius:999px; font-size:.85rem; font-weight:600; z-index:80; transition: transform .45s var(--ease); box-shadow:0 18px 40px -16px rgba(0,0,0,.5); }
.toast.is-on { transform: translate(-50%, 0); }

/* Modal */
.modal { position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal.is-open { display:flex; }
.modal__bg { position:absolute; inset:0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); animation: fadeIn .25s ease; }
.modal__box { position:relative; background:#fff; border-radius:24px; width:100%; max-width:440px; padding:1.75rem; animation: popIn .4s var(--ease); max-height:90vh; overflow:auto; }
@keyframes fadeIn { from { opacity:0; } }
@keyframes popIn { from { opacity:0; transform: translateY(20px) scale(.96); } }

/* Policy prose */
.prose-policy p { margin-bottom:.75rem; }
.prose-policy ul { list-style: disc; padding-left:1.25rem; margin-bottom:.75rem; }
.prose-policy li { margin-bottom:.35rem; }
.prose-policy a { color: var(--brand-700); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }
.prose-policy strong { color: var(--ink); }

/* Heart burst on donate */
.heart-pop { position:fixed; pointer-events:none; z-index:90; color: var(--coral); font-size:18px; animation: heartUp 1.1s var(--ease) forwards; }
@keyframes heartUp { to { transform: translate(var(--dx), -120px) scale(1.4); opacity:0; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    [data-animate] { opacity:1; transform:none; }
}