:root{
    --bg:#f6f7fb; --card:#ffffff; --muted:#6b7280; --accent1:#0ea5a6; --accent2:#7c3aed;
    --glass: rgba(255,255,255,0.6);
    --shadow: 0 10px 30px rgba(16,24,40,0.08);
    --glass-border: rgba(255,255,255,0.5);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fbfdff 0%, #f0f4ff 100%);color:#102a43;min-height:100vh}
.wrap{max-width:1140px;margin:40px auto;padding:24px}

header{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.logo{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;box-shadow:0 8px 30px rgba(99,102,241,0.16);font-size:20px}
h1{margin:0;font-size:26px}
p.lead{margin:6px 0 0;color:var(--muted)}

/* tabs */
.tabs{display:flex;gap:10px;margin:22px 0 28px}
.tab{background:transparent;border:0;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:600;color:#334155}
.tab.active{background:linear-gradient(90deg,rgba(124,58,237,0.12),rgba(14,165,166,0.12));box-shadow:inset 0 -2px 0 rgba(0,0,0,0.03)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.place-card{background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.85));border-radius:16px;padding:18px;position:relative;overflow:hidden;backdrop-filter: blur(6px);box-shadow:var(--shadow);border:1px solid rgba(16,24,40,0.04);transform:translateY(18px);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.25,1),opacity .6s}
.place-card.onscreen{transform:none;opacity:1}

.art{height:120px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;position:relative}
.art .svg{width:72px;height:72px}
.title{font-size:18px;margin:0 0 6px}
.meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:linear-gradient(90deg, rgba(124,58,237,0.06), rgba(14,165,166,0.06));font-weight:600;color:#1f2937;font-size:13px}

/* Art BG styles */
.bg-stream{background:linear-gradient(135deg,#9be7ff33,#0ea5a633);}
.bg-forest{background:linear-gradient(135deg,#d1fae533,#4ade8055);}
.bg-farm{background:linear-gradient(135deg,#fff1c233,#f59e0b33);}
.bg-market{background:linear-gradient(135deg,#ffdbe933,#fb718533);}
.bg-history{background:linear-gradient(135deg,#e9d5ff55,#ef444455);}

/* icon float animation */
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* hover effect */
.place-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 50px rgba(16,24,40,0.12)}
.cta{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;font-weight:700;cursor:pointer}

/* responsive tweaks */
@media (max-width:540px){.logo{width:56px;height:56px;font-size:18px}.wrap{padding:14px}}

/* subtle decorative wave */
.wave{position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;filter:blur(28px);opacity:.12;background:linear-gradient(135deg,#7c3aed,#0ea5a6)}

/* map placeholder */
.map{height:140px;border-radius:12px;background:linear-gradient(180deg,#e6f8ff 0%, #eff6ff 100%);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}

.place-video {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.place-card:hover .place-video {
    transform: scale(1.05);
}