/* neighborhood.html — visual layer only. Load LAST. */
:root{--nb-cu:#b4561f;--nb-cu2:#f0a35e;--nb-navy:#0b1530}
@keyframes nbIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes nbFloat{50%{transform:translateY(16px) scale(1.06)}}
@keyframes nbPulse{70%{box-shadow:0 0 0 8px transparent}0%{box-shadow:0 0 0 0 rgba(240,163,94,.7)}}
.nb-hero{position:relative;overflow:hidden;background:radial-gradient(600px 300px at 85% 0,rgba(240,163,94,.42),transparent 60%),linear-gradient(135deg,#0b1530,#14244d)!important;padding-bottom:70px!important}
.nb-hero::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;inset-inline-start:5%;top:-110px;background:radial-gradient(circle,rgba(255,184,107,.6),transparent 65%);animation:nbFloat 7s ease-in-out infinite;pointer-events:none}
.nb-hero h1{font-size:clamp(1.9rem,5vw,3rem)!important;animation:nbIn .7s both}.nb-hero p{animation:nbIn .7s .1s both}.nb-hero__actions{animation:nbIn .7s .2s both}
.nb-hero .btn-cta{box-shadow:0 14px 30px rgba(180,86,31,.5)}
.nb-hero .btn{min-height:52px;border-radius:99px;font-weight:800}
.section-head{margin-bottom:20px}.section-title{font-weight:800;color:var(--nb-navy)}
.nb-grid{gap:20px!important}
.nb-card{position:relative;overflow:hidden;border-radius:26px!important;border:1px solid #fff!important;background:#fff;box-shadow:0 16px 44px rgba(11,21,48,.09)!important;animation:nbIn .7s both;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.nb-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--nb-cu),var(--nb-cu2))}
.nb-card:nth-child(2){animation-delay:.08s}.nb-card:nth-child(n+3){animation-delay:.16s}
.nb-card:hover{transform:translateY(-8px);box-shadow:0 28px 58px rgba(180,86,31,.2)!important}
.nb-card__name{font-weight:800;color:var(--nb-navy)}
.nb-card__count{font-size:1.3rem;color:var(--nb-cu)!important}
.nb-card .progress{height:10px;border-radius:10px;background:#e8edf6;overflow:hidden}
.nb-card .progress__bar{background:linear-gradient(90deg,var(--nb-cu),var(--nb-cu2))!important;border-radius:10px;box-shadow:0 0 14px rgba(240,163,94,.6);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.nb-progress-ring{filter:drop-shadow(0 6px 10px rgba(180,86,31,.25))}
.nb-card .btn-cta{min-height:48px;border-radius:99px;font-weight:800;box-shadow:0 12px 26px rgba(180,86,31,.36);transition:transform .25s}.nb-card .btn-cta:hover{transform:translateY(-3px) scale(1.02)}
.nb-card .badge{border-radius:99px;font-weight:700}
.activity-card,.create-card{border-radius:26px!important;border:1px solid #fff!important;box-shadow:0 16px 44px rgba(11,21,48,.09)!important}
.activity-card ul{position:relative}
.activity-item{position:relative;padding-inline-start:4px}
.activity-item__dot{background:linear-gradient(135deg,var(--nb-cu),var(--nb-cu2))!important;animation:nbPulse 2.4s infinite}
.create-card{background:linear-gradient(160deg,#fff4e8,#fff)!important;border:2px dashed #f3c79a!important}
.create-card .input,.create-card .select,.create-card textarea{min-height:50px;border-radius:16px;border:2px solid #e5e9f2;transition:.25s}
.create-card .input:focus,.create-card .select:focus,.create-card textarea:focus{outline:0;border-color:var(--nb-cu);box-shadow:0 0 0 5px rgba(180,86,31,.14)}
.create-card .btn{min-height:50px;border-radius:99px;font-weight:800}
.join-success.is-active{animation:nbIn .5s both}
@media(prefers-reduced-motion:reduce){.nb-hero *,.nb-hero::after,.nb-card,.activity-item__dot{animation:none!important;transition:none!important}}