@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap");

:root{
  --base-1: #FAF8F5; /* Offwhite */
  --primary: #3B6F54; /* Forest Green */
  --accent: #E97A63;  /* Sunset Coral */
  --amber: #E9B44C;   /* Golden Amber */
  --text: #2B2B2B;    /* Graphite */
  --hint: #CCC7C1;    /* Warm Gray */
}

:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  /* Warm, airy background */
  background:
    radial-gradient(1100px 600px at 10% -15%, rgba(233, 122, 99, 0.12), transparent 50%),
    radial-gradient(900px 500px at 110% 120%, rgba(59, 111, 84, 0.12), transparent 50%),
    linear-gradient(180deg, var(--base-1), #F1EEE9);
  display: grid; place-items: center;
  line-height: 1.55;
}

.card {
  width: min(96%, 820px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px) saturate(118%);
  border: 1px solid var(--hint);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(43, 43, 43, 0.12);
  padding: clamp(22px, 5.5vw, 46px);
  text-align: center;
}

.stage { position: relative; height: 320px; margin: 10px 0 8px; }

h1 { margin: 6px 0 8px; font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 5vw, 46px); }

p { margin: 0; color: rgba(43,43,43,.72); font-size: clamp(14px, 2.2vw, 18px); }

footer { position: fixed; inset:auto 0 14px; display:flex; justify-content:center; font-size:.95rem; color: rgba(43,43,43,.65); }

.map{
  position: absolute; inset: 10px 10px 24px; border-radius: 12px;
  background:
   
    linear-gradient(90deg, rgba(204,199,193,.75) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(0deg,  rgba(204,199,193,.75) 1px, transparent 1px) 0 0 / 56px 56px,
    /* rivers/green belts (subtle) */
    radial-gradient(500px 160px at 15% 75%, rgba(59,111,84,.08), transparent),
    radial-gradient(380px 120px at 80% 20%, rgba(233,122,99,.08), transparent),
    /* base */
    #fff;
  box-shadow: inset 0 0 0 1px rgba(43,43,43,.06);
}

/* blocks */
.block{ position:absolute; background:#fff; border:1px solid var(--hint); border-radius:10px; box-shadow:0 10px 24px rgba(43,43,43,.06)}
.b1{ left:8%; top:14%; width:120px; height:70px; }
.b2{ left:38%; top:12%; width:90px; height:60px; }
.b3{ left:68%; top:14%; width:110px; height:70px; }
.b4{ left:20%; top:58%; width:130px; height:80px; }
.b5{ left:52%; top:46%; width:120px; height:78px; }
.b6{ left:70%; top:64%; width:96px; height:66px; }

/* ===============
   Thematic Pins
   =============== */
.pin{
  --size: 42px;
  position: absolute; left: var(--x); top: var(--y);
  width: var(--size); height: var(--size);
  border-radius: 50%; border:2px solid #fff;
  background: var(--primary);
  box-shadow: 0 8px 24px rgba(59,111,84,.25);
  transform: translate(-50%, -50%);
  cursor: default;
}
.pin:focus{ outline: none; box-shadow: 0 0 0 4px rgba(59,111,84,.22), 0 8px 24px rgba(59,111,84,.25); }

/* pulse ring */
.pin::before{
  content: ""; position: absolute; inset: 0; border-radius: 50%; border:2px solid var(--primary); opacity:.6;
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring{ 0%{transform:scale(1); opacity:.6} 70%{transform:scale(1.8); opacity:0} 100%{transform:scale(1); opacity:0} }

/* inner icon plate */
.pin::after{ content:""; position:absolute; inset:10px; border-radius:50%; background:#FAF8F5; }

/* --- Icon Variants (pure CSS) --- */

.pin--pl{ background: var(--primary); }
.pin--pl .i{ display:none }
.pin--pl span, .pin--ar span, .pin--mu span, .pin--co span, .pin--ho span{ display:none }
.pin--pl::after{ box-shadow: inset 0 0 0 1px rgba(43,43,43,.06); }
.pin--pl .leaf{ position:absolute; width:14px; height:9px; background: var(--primary); border-radius:14px; top:14px }
.pin--pl .leaf.l{ left:12px; transform: rotate(-22deg); }
.pin--pl .leaf.r{ right:12px; transform: rotate(22deg); }

.pin--ar{ background: var(--accent); }
.pin--ar::after{ background:#fff; }
.pin--ar .handle{ position:absolute; width:12px; height:18px; background:#E9B44C; border-radius:6px; left:50%; top:10px; transform:translateX(-50%) }
.pin--ar .tip{ position:absolute; width:18px; height:10px; background:#2B2B2B; border-radius:10px 10px 2px 2px; left:50%; top:24px; transform:translateX(-50%) rotate(18deg) }

.pin--mu{ background: #8CC2B5; }
.pin--mu::before{ border-color:#8CC2B5; }
.pin--mu::after{ background:#fff; }
.pin--mu .stem{ position:absolute; width:3px; height:18px; background:#2B2B2B; left:20px; top:10px }
.pin--mu .head{ position:absolute; width:12px; height:10px; background:#2B2B2B; border-radius:50%; left:13px; top:22px; transform: rotate(-8deg) }

.pin--co{ background:#3B6F54; }
.pin--co::after{ background:#fff; }
.pin--co .case{ position:absolute; width:18px; height:12px; background:#2B2B2B; left:50%; top:18px; transform:translateX(-50%); border-radius:2px }
.pin--co .handle{ position:absolute; width:12px; height:6px; border:2px solid #2B2B2B; border-bottom:none; left:50%; top:12px; transform:translateX(-50%); border-radius:4px 4px 0 0 }

.pin--ho{ background:#E97A63; }
.pin--ho::after{ background:#fff; }
.pin--ho .roof{ position:absolute; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:12px solid #2B2B2B; left:50%; top:12px; transform:translateX(-50%) }
.pin--ho .door{ position:absolute; width:8px; height:10px; background:#2B2B2B; left:50%; top:24px; transform:translateX(-50%); border-radius:1px }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .pin::before{ animation: none; opacity:.25 }
}