@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root{
  --accent:#55266C; /* primary purple */
  --accent-2:#7B4A9E; /* secondary purple */
  --bg:#fffdf9;
  --muted:#6b6b6b;
  --card-bg:#ffffff;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:var(--bg); color:#222; margin:0; -webkit-font-smoothing:antialiased}

.site-header{padding:24px 12px; text-align:center; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border-bottom:1px solid rgba(0,0,0,0.08)}
.site-header h1{font-weight:600; letter-spacing:0.6px; color:#fff}
.site-header p{color:rgba(255,255,255,0.9); margin-top:6px}
.site-header .subtitle{color:rgba(255,255,255,0.98); font-weight:500; opacity:1; font-size:16px}

.container{max-width:1100px; margin:20px auto; padding:0 16px}

nav a{color:rgba(255,255,255,0.9); text-decoration:none; padding:8px 10px; border-radius:8px}
nav a:hover{background:rgba(255,255,255,0.06); color:#fff}

.hero{background:linear-gradient(180deg, rgba(231,111,81,0.06), transparent); padding:28px; border-radius:var(--radius); margin:18px 0; display:flex; gap:18px; align-items:center}
.hero{background:linear-gradient(180deg, rgba(85,38,108,0.06), transparent);}
.hero .hero-text{flex:1}
.hero h2{margin:0 0 8px}
.hero p{margin:0 0 12px; color:var(--muted)}
.hero .cta{display:inline-block; background:var(--accent); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.card{background:var(--card-bg); border-radius:12px; padding:14px; box-shadow:0 6px 18px rgba(14,14,14,0.06); display:flex; gap:12px; align-items:flex-start}
.card img{width:92px; height:auto; border-radius:8px; object-fit:cover}
.card h3{margin:0 0 6px; font-size:18px}
.card p{color:var(--muted); font-size:14px; margin:0}
.card .meta{margin-top:8px; display:flex; gap:8px; align-items:center}
.price{background:var(--accent-2); color:#fff; padding:6px 8px; border-radius:8px; font-weight:600}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none}

/* Arc title and camila photo */
.arc-title{display:block; margin:6px auto 0; width:360px; height:120px}
.camila-photo{width:160px; height:160px; border-radius:50%; object-fit:cover; border:8px solid #fff; box-shadow:0 10px 30px rgba(85,38,108,0.18); margin-left:auto}
.motto{color:var(--accent-2); font-weight:600; text-align:center; margin-top:8px}

/* FUNDHEMI ribbon */
.fundhemi-ribbon{background:linear-gradient(90deg, rgba(85,38,108,0.06), rgba(123,74,158,0.03)); border-top:1px solid rgba(85,38,108,0.06); padding:12px; display:flex; gap:12px; align-items:center; justify-content:center}
.fundhemi-ribbon img{height:44px}
.fundhemi-ribbon a{color:var(--accent); font-weight:600; text-decoration:none}

/* Admin and forms */
form input[type="text"], form input[type="number"], form input[type="password"], form input[type="file"]{padding:8px; border-radius:8px; border:1px solid #eee; width:100%; margin:6px 0}

footer{padding:24px; text-align:center; color:var(--muted); font-size:13px}

@media (max-width:720px){
  .hero{flex-direction:column; text-align:center}
  .card{flex-direction:row}
}