/* UFRCT Modern Front-End Refresh — visual only */
:root{--uf-blue:#075d8b;--uf-blue-2:#087eaa;--uf-navy:#052f55;--uf-red:#e34a36;--uf-green:#3f9b35;--uf-yellow:#f2c400;--uf-ink:#17324d;--uf-muted:#687983;--uf-soft:#f4f8fb;--uf-card:#fff;--uf-radius:18px;--uf-shadow:0 12px 34px rgba(9,48,78,.10);--uf-shadow-hover:0 18px 42px rgba(9,48,78,.16)}
html{scroll-padding-top:145px}
body{background:linear-gradient(180deg,#f7fbfd 0,#fff 24%,#f7fafc 100%);color:var(--uf-ink);-webkit-font-smoothing:antialiased}
.top{background:linear-gradient(90deg,#042b4d,var(--uf-navy));min-height:36px;padding:7px 18px;font-size:12px;letter-spacing:.15px}
header{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(5,47,85,.08);border-bottom:1px solid rgba(7,93,139,.08)}
.header{min-height:88px}
.real-logo{width:64px;height:64px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.14))}
.brand h1{font-size:26px;letter-spacing:.4px;color:var(--uf-blue)}
.brand p{font-size:11px;color:#71808a;letter-spacing:.65px}
.tagline{font-size:16px;color:var(--uf-red)}
.header-btn{border-radius:12px;padding:10px 15px;box-shadow:0 5px 16px rgba(0,0,0,.08)}
.header-donate{background:linear-gradient(135deg,#e53b2c,#c9281d)}
.header-member{background:linear-gradient(135deg,#4da93c,#32852b)}
.header-login{background:linear-gradient(135deg,#087eaa,#075d8b);color:#fff}
nav{position:sticky;top:88px;z-index:999;background:rgba(5,65,111,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:3px solid var(--uf-yellow);box-shadow:0 8px 24px rgba(5,47,85,.13)}
.nav a{padding:12px 15px;font-weight:600;font-size:13px}
.nav a:first-child{background:rgba(255,255,255,.08)}
.hero{min-height:580px}
.hero-content{padding-top:70px;padding-bottom:70px}
.hero-badge{border:1px solid rgba(255,255,255,.24);box-shadow:0 10px 28px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
.btn{border-radius:12px!important;box-shadow:0 8px 18px rgba(0,0,0,.10);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.15);filter:brightness(1.03)}
section:not(.hero){position:relative}
.title{margin-bottom:30px}
.title h2{letter-spacing:-.2px}
.title p{max-width:720px;margin-left:auto;margin-right:auto}
.about-grid{gap:34px}
.about,.thinking-box,.contact-info,.form,.general-payment-box,.profile,.history-box,.message,.no-message,.section,.office-wrapper{border-radius:var(--uf-radius)!important;box-shadow:var(--uf-shadow)!important;border:1px solid rgba(7,93,139,.07)}
.about{padding:30px!important}
.thinking-box{border-radius:22px!important}
.cards{gap:18px}
.card{border-radius:18px!important;border:1px solid rgba(7,93,139,.08);box-shadow:var(--uf-shadow)!important;background:rgba(255,255,255,.96);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--uf-shadow-hover)!important;border-color:rgba(7,126,170,.18)}
.card .icon{border-radius:14px}
.stats{background:linear-gradient(135deg,#06416f,#087eaa)!important}
.stat{padding:24px 18px}
.office-wrapper{overflow:hidden;background:#fff}
.office-table-head{background:linear-gradient(90deg,#06416f,#087eaa)!important}
.office-row{transition:background .2s ease}
.office-row:hover{background:#f5fbfe!important}
.form{background:rgba(255,255,255,.97)!important;padding:28px!important}
input,textarea,select{border-radius:12px!important;border:1px solid #d6e1e7!important;background:#fbfdfe!important;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{outline:none!important;border-color:#087eaa!important;box-shadow:0 0 0 4px rgba(8,126,170,.10)!important;background:#fff!important}
.gallery-item{border-radius:18px!important;overflow:hidden;box-shadow:var(--uf-shadow)!important;transition:transform .22s,box-shadow .22s}
.gallery-item:hover{transform:translateY(-5px);box-shadow:var(--uf-shadow-hover)!important}
.donate{background:linear-gradient(135deg,#06416f,#087eaa)!important}
.donate-box{border-radius:24px!important;box-shadow:0 18px 45px rgba(5,47,85,.18)!important}
.contact-grid{gap:28px}
.footer{background:linear-gradient(135deg,#042b4d,#063b67)!important}
.footer-grid a{transition:color .2s}
.footer-grid a:hover{color:#ffd21b!important}
.copyright{background:rgba(0,0,0,.15)!important}
@media(max-width:900px){
  html{scroll-padding-top:130px}
  .header{min-height:78px}
  nav{top:78px}
  .real-logo{width:54px;height:54px}
  .brand h1{font-size:22px}
  .tagline{display:none}
  .hero{min-height:520px}
  .hero-content{padding-top:55px;padding-bottom:55px}
}
@media(max-width:650px){
  html{scroll-padding-top:118px}
  .top{font-size:11px;gap:5px 8px;padding:6px 10px}
  .header{min-height:72px;gap:10px;padding-top:8px;padding-bottom:8px}
  nav{top:72px}
  .logo-area{gap:9px;min-width:0}
  .real-logo{width:48px;height:48px}
  .brand h1{font-size:20px}
  .brand p{font-size:9px;letter-spacing:.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
  .header-actions{gap:6px}
  .header-btn{padding:8px 9px;font-size:11px;border-radius:9px}
  .nav{width:100%;padding:0 3%;}
  .nav a{padding:11px 13px;font-size:12px}
  .hero-content{padding:45px 0}
  .hero h2{font-size:34px!important;line-height:1.15}
  .hero p{font-size:15px!important}
  .cards{gap:12px}
  .card{padding:20px 16px!important}
  .form{padding:18px!important}
  .office-scroll{overflow-x:auto}
  .footer-grid{gap:24px}
}
@media(max-width:420px){
  .brand p{display:none}
  .brand h1{font-size:19px}
  .header-actions .header-btn{font-size:10px;padding:7px 8px}
  .hero h2{font-size:29px!important}
}

/* =========================================================
   UFRCT V3 — PREMIUM PUBLIC EXPERIENCE
   Visual-only layer: no PHP/database/function changes.
========================================================= */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 8% 8%,rgba(8,126,170,.07),transparent 28%),radial-gradient(circle at 92% 18%,rgba(63,155,53,.05),transparent 24%)}
.top{display:flex;align-items:center;justify-content:center;gap:14px;position:relative;z-index:1201}
header{position:sticky!important;top:0!important;z-index:1200}
.header{position:relative}
.logo-area{min-width:0}
.brand{min-width:0}
.brand h1{font-weight:800!important;line-height:1.1}
.header-actions{display:flex;align-items:center;gap:8px}
.header-btn{font-weight:700!important;transition:all .2s ease!important}
.header-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
nav{top:calc(var(--uf-header-height, 88px) + 0px)!important;z-index:1190}
.nav{overflow-x:auto;scrollbar-width:none;display:flex!important;align-items:center}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;position:relative;transition:background .2s,color .2s}
.nav a:after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:99px;background:#ffd21b;transform:scaleX(0);transition:transform .2s}
.nav a:hover:after,.nav a.active:after{transform:scaleX(1)}
.hero{position:relative;isolation:isolate;overflow:hidden;background-attachment:fixed}
.hero:after{content:"";position:absolute;inset:auto -10% -100px;height:240px;background:radial-gradient(ellipse,rgba(255,255,255,.18),transparent 68%);z-index:-1}
.hero-content{max-width:1180px}
.hero-badge{display:inline-flex!important;align-items:center;gap:8px;border-radius:999px!important;padding:9px 15px!important;font-weight:700!important}
.hero h2{font-weight:850!important;letter-spacing:-1px;text-shadow:0 4px 22px rgba(0,0,0,.12)}
.hero p{max-width:760px;line-height:1.75!important}
.buttons{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-weight:750!important;padding:12px 18px!important}
.title h2{font-weight:850!important;font-size:clamp(27px,4vw,38px)!important}
.title:after{content:"";display:block;width:54px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--uf-blue),var(--uf-yellow));margin:14px auto 0}
.about,.thinking-box,.card,.office-wrapper,.form,.contact-info,.donate-box{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card{position:relative;overflow:hidden}
.card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--uf-blue),var(--uf-blue-2));opacity:.8}
.card .icon{box-shadow:0 8px 18px rgba(7,93,139,.12)}
.stats{position:relative;overflow:hidden}
.stats:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;top:-160px;background:rgba(255,255,255,.07)}
.stat strong,.stat b{position:relative}
.gallery{gap:16px!important}
.gallery-item img{transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.04)}
.office-section{background:linear-gradient(180deg,rgba(247,251,253,.5),rgba(255,255,255,.9))}
.contact-info,.form{transition:transform .2s ease,box-shadow .2s ease}
.contact-info:hover,.form:hover{box-shadow:0 18px 42px rgba(9,48,78,.12)!important}
.footer{margin-top:0!important}
@media(max-width:900px){
  header{top:0!important}
  nav{top:78px!important}
  .hero{background-attachment:scroll}
}
@media(max-width:650px){
  nav{top:72px!important}
  .top{justify-content:flex-start;overflow-x:auto;white-space:nowrap}
  .header-actions{flex-shrink:0}
  .buttons .btn{flex:1 1 145px;text-align:center}
  .hero-content{padding-left:18px!important;padding-right:18px!important}
  .hero-badge{font-size:11px!important}
  .title h2{font-size:27px!important}
}